Follow Me on Pinterest
 
Tuesday, 31 July 2012 14:56

Responsive Slider Photo Galleria

Compatibility : Joomla 2.5Joomla 3.x
 

Avatar Slide Galleria Extension is a Joomla Slideshow is based on the Galleria plugin. Joomla photo gallery has responsive and swipe features for touch devices and a new experience with fullscreen feature.

Features Free Pro Unlimited (Module only)
Multiple Sliders No Yes Yes
Remove Copyright No Yes Yes
Limit Images 7 Unlimit Unlimit
Themes 1 Yes Yes
Folder Source 1 folder Multiple folders Multiple folders
Picasa Source 1 search menthod 3 search menthods 3 search menthods
Flickr Source 1 search menthod 7 search menthods 7 search menthods
Phoca Source No No Yes
JoomGallery Source No No Yes

FEATURES:

  • 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:

Module Setting

  • Module Class suffix
  • Jquery:
    • unload: no loading Jquery
    • latest: loading latest version of jquery
    • Version numver: loading specific version: example (1.9.2 or 1.8.2)
    • Set width for module: example 100% or 100px
    • Set height for module: example 100 or 0.5 (o.5 is ratio=height/weight, fully responsive)
  • Select Image source for slide:
    • Folder
    • Picasa
    • Flickr
    • PhocaGallery (Unlimited version Only)
    • JoomGallery (Unlimited version Only)
  • Set max image can be displayed (Pro version Only)
  • Show/hide copyright (Pro version Only)

Flickr Settings/Picasa Setting

  • 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”

Folder Settings

  • Select Image Folder for sliding
  • Add the image titles/ descriptions/ links

Apperance Settings

  • Select theme (Pro version Only)
  • If you want change color of theme, you must select "customize" value. Then click on color picker to select the color that you want

Slide Setting

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 silde: example 100 or 0.5 (o.5 is ratio=height/weight, fully responsive)
  • width : Width of slide:example 100px or 100% (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