Responsive Slider Photo Galleria

• Responsive slider.
• Support 3 theme (Classic/ August/ Semtember)
• Slide image from Picasa, Flickr, Folder, PhocaGallery, JoomGallery
• Slide image ralated to string, your account, album, galleria, group on Picasa, Flick
• Support create multiple modules on one page.
• Load/Unload jQuery, choice version of jQuery
• Easy to change size of module.
• Auto resize to fit options.
• Add Title, Description, URL for Image in local folder
• Transparent background on/off
• Change Background, title, description color
• Config number of products can be displayed.
• Set width of module in pixel or percent.
• Use  arrows to next or previous slider.
• Fullscreen mode
• Customize  time display for one image and animation speed of effect.
• Multi select image folder for slide.
• Crop images to fit window true/flase/height/width/landscape/portrait
• true means that all images will be scaled to fill the stage, centered and cropped.
• false will scale down so the entire image fits.
• height will scale the image to fill the height of the stage.
• width will scale the image to fill the width of the stage.
• landscape will fill up images that has landscape proportions, but scale portrait images to fit inside the container.
• portrait is like landscape but the other way around.
• Thumbnails based on width or height
• On/Off : autoplay, counter, navigation, thumbnails, lightbox, image pan, copyright, fullscreen, progress…
• Change image quality (for Picasa& Flickr).

SETUP MODULE

Login to Joomla Control Panel page as Administrator

• Choice Extension>Module Manager.
• Click New.
• Choice Avatar Slide Galleria.

Set the parameter for your Module:

Slide Setting

• Set width & height for module: example 100% or 100px
• Class suffix
• Show/hide copyright (Pro version Only)

Source Setting

• Select Slide Image from Flickr, Picasa or Folder
• Select max items can be displayed
• Choice method search for Flick or Picasa: Search by string, user, gallery, album, group …(note: picasa search by user nam/album: type string into string for searach like userID/album)
• If source is Flickr, you can display image in order by choice “sort”
• Select image folder if y choice source is folder (image folder in …/images/)

Slide Setting

• Choice image quality: low/medium/height/original. (for Picasa& Flickr)
• On/Off : lightbox, image pan, autoplay, show counter, show navigation, copyright…
• Choice transition, transiton speed, type of thumbnail

PLUGIN CONTENT SYNTAX

Insert this syntax to your joomla’s articles.(Please, enable Avatar Slide Galleria in Plugin Manager)

{avatargalleria options=…/}

Example :

{avatargalleria src=folder path=Test height=200px width=300px theme=classic  count=15 quality=medium/}

{avatargalleria src=flickr search=search string=$New York$ sort=dpa width=100% height=200px  count=16 quality=medium theme=august/}

{avatargalleria src=picasa search=user string=$116771399288983097230$ width=500px height=200px   count=100 quality=original theme=september/}

 Options :

• src : flickr/picasa/folder (*)
• path : the folder in joomla_root/images/  (only for src=folder)
• path=path1,path2,path3 (syntax for multi folder)
• count : Number of image (Only for Picasa & Flickr)
• search : search method
• Flickr: search/user/tag/set/gallery/groupSearch/groupID
• Picasa: search/user/useralbum
• string: string for search method. Put string between symbol $…$ (example: string=$London$)
• flickrsort : flickr option (example: sort=dpa)
• dpa: date-posted-asc
• dpd: date-posted-desc
• dta: date-taken-asc
• dtd: date-taken-desc
• id: interestingness-desc
• ia: interestingness-asc
• relevance: relevance
• sort : local folder option
• random
• false
• theme:  (*)
• classic
• august
• september
• height : Height of slide (px/%)
• width : Width of slide (px/%)
• auto : (true/false) Sets Galleria to play slidehow when initialized.
• responsive:  Sets Galleria in responsive mode.
• lightbox : (true/false) Helper for attaching a lightbox when the user clicks on an image.
• imgcrop : (true/false/landscape/portrait/height/width) Defines how Galleria will crop the image.

1. true means that all images will be scaled to fill the stage, centered and cropped.
2. false will scale down so the entire image fits.
3. height will scale the image to fill the height of the stage.
4. width will scale the image to fill the width of the stage.
5. landscape will fill up images that has landscape proportions, but scale portrait images to fit inside the container.
6. portrait is like landscape but the other way around.

• imgpan : (true/false) Toggles the image pan effect.
• showcounter : (true/false) Toggles the counter.
• shownav : (true/false) show image navigation.
• swipe : (true/false) Enables the swipe gesture for navigating on touch devices.
• cr : (true/false) Show copyright
• transition : Defines what transition to use.
• ‘fade’ 
• crossfade betweens images
• ‘flash’ fades into background color between images
• ‘pulse’ quickly removes the image into background color, then fades the next image
• ‘slide’ slides the images depending on image position
• ‘fadeslide’ fade between images and slide slightly at the same time
• imgpansmoothness : numberic (Defines how smooth ( and CPU consuming ) the pan effect should be.)
• time : time to silde image (should be more than 1500 mls).
• thumbnails : type of thumbnails
• true
• false
• empty
• number
• info : (true/false) show hide info of picture
• fullscreen : (true/false)
• progress : (true/false) show hide progress bar
• speed: (ex:500)
• jquery :
• unload : unload jQuery
• latest : latest version of jQuery (Default)
• specific version
• example: jquery=1.8.2 (load jquery 1.8.2)

(Note: Enable Avatar Slide Galleria Plugin in Plugin manager)

How to get user ID, Gallery ID… from Flickr or Picasa ?

FLICKR

Flickr User ID :

Sign in to Flickr , click You tag and see URL like :  http://www.flickr.com/photos/16883133@N05/ your Flickr acount id is “16883133@N05″

Flickr Gallery ID

Visit http://www.flickr.com/services/api/explore/flickr.urls.lookupGallery copy and parse gallery URL to Arguments URL then click Call method button

Flickr Group ID

Visit http://www.flickr.com/services/api/explore/flickr.urls.lookupGroup copy and parse group URL to Arguments URL then click Call method button

See Flickr API here: http://www.flickr.com/services/api/

PICASA

Picasa user ID

To find your address, sign in to Picasa Web Albums, click the My Photos tab, and then click My Photos. see URL like like : https://picasaweb.google.com/116771399286983097230

your picasa id is “116771399286983097230″

Picasa user name/album

To find your address, sign in to Picasa Web Albums, click the My Photos tab, and then click My Photos,click album want to be silde. See Url like :  https://picasaweb.google.com/116771399286983097230/youralbum

put “116771399286983097230/youralbum” to string for search

jQuery Conflict Solution

• Module:
• Type in to the jQuery option box: latest/unload or specific version of jQuery
•  Plugin:
• Add syntax "jquey=...."
• latest : load latest version of jQuery
• unload : unload jQuery
• version of jQuery: load specific jQuery version

Joomla gallery