B4J Library [ABMaterial]: MashGallery

This is a picture gallery featuring...


1. Start, Pause and Play slideshow
2. Zoom images
3. Thumbnails (image, numbers, square) placing these on right, bottom, left or top of gallery
4. 68 different image transitions
5. Hide/Show Thumbnames / Image title.
6. Show images in random preference.
7. Expand gallery to fit the screen
8. Arrows to scroll the gallery
9. Toggle thumbnail visibility.
10. Specify height of the gallery, default is 600px
11. Set mode to be slider/standard/fullscreen
12. Specify the interval in seconds per image
13. Indicate the number of rows and columns per image (this splits an image to rows and columns on show and consolidates it)

On the video is standard mode..

To be part of MashPlugIns 1.01

In Class Globals

Public mashgallery As MashGallery

In BuildPage

MashPlugIns.NeedsJGallery(page)

In ConnectPage

MashPlugIns.AddTheme("wb",ABM.COLOR_WHITE,ABM.INTENSITY_NORMAL,ABM.COLOR_BLACK,ABM.INTENSITY_LIGHTEN5)
    mashgallery.Initialize(page,"mashgallery","wb")
    mashgallery.SetMode(mashgallery.EnumMode.standard)
    mashgallery.thumbnailsPosition = mashgallery.enumthumbnailsPosition.bottom
    mashgallery.thumbType = mashgallery.enumthumbType.image
    mashgallery.HeightPx = "800px"
    mashgallery.Interval = mashgallery.EnumInterval.threeseconds
    mashgallery.ThumbNails = True
    mashgallery.Transition = mashgallery.EnumTransition.random
    mashgallery.TransitionBackward = mashgallery.EnumTransition.random
    mashgallery.TransitionCols = ""
    mashgallery.Title = True
    mashgallery.AddSlide("../images/slider1.jpg","One")
    mashgallery.AddSlide("../images/slider2.jpg","Two")
    mashgallery.AddSlide("../images/slider3.jpg","Three")
    mashgallery.AddSlide("../images/slider4.jpg","Four")
    mashgallery.AddSlide("../images/slider5.jpg","Five")
    mashgallery.AddSlide("../images/slider6.jpg","Six")
    mashgallery.AddSlide("../images/slider7.jpg","Seven")
    mashgallery.AddSlide("../images/slider8.jpg","Eight")
    mashgallery.AddSlide("../images/slider9.jpg","Nine")
    mashgallery.AddSlide("../images/slider10.jpg","Ten")
    page.Cell(2,1).AddComponent(mashgallery.ABMComp)

 

[Mashiane]

With just a change in code, you can also create different Albums for your images. In this example I have split the images into two different albums.

mashgallery.AddAlbum("Album 1")
    Dim img As Int
    For img = 1 To 10
        mashgallery.AddAlbumSlide("Album 1",$"../images/${img}.jpg"$,"Image " & img)
    Next
    mashgallery.AddAlbum("Album 2")
    For img = 11 To 17
        mashgallery.AddAlbumSlide("Album 2",$"../images/${img}.jpg"$,"Image " & img)
    Next