WordPress Version
Updates
UPDATE 2.1 [ 14/06/2011 ]
added autoheight example + api calls
UPDATE 2.0 [ 09/06/2011 ]
fixed bugs
rebranded to Phoenix Gallery – same gallery features + more
added thumbnail navigation
Introduction
jQuery Ken Burns Slideshowis the perfect way to showcase your pictures/ads in style. Each item has a separate slideshow time and you can edit their link, target and many other individual settings just by modifying the HTML.
Features
supports .PNGs, .JPGs, .GIFs
API – call pause, play, gotoNext, gotoPrev from your html (outside the gallery)
autoheight – option to autosize the gallery depending on the height of the content
supports unlimited items – rotate as many pictures as you wish
slideshow mode – with independent time for each item that you can define in the HTML provided
values you can set up for each item – description (the description from the top), initialZoom(any value you wish), finalZoom, slideshowTime ( the time the banner rotator stays focused on the specific item ), burn effect time ( the time you wish the effect to take ), url (if no url is set the item will just be a image with no link on click ), transitionType(easeInSine,linear etc.) , initialposition, final position (choose from topleft,topcenter,topright,middleleft,middlecenter,middleright,bottomleft,bottomcenter,bottomright )
resizable to your preferred size – all contents will position proper
Possible panning positions ( initial and final )
FAQ
How to set the number of thumbnails, I have this portrait images in the slider.. the navigation only shows 2 of them, while there is space for 4?
You can’t set the number of thumbnails displayed per ‘page’ because it’s calculated automatically from thumb width / height and thumb space. So try to lower that for more thumbs. Also there is another parameter “nav_arrow_size:40” – this is the space that is allocated for each arrow ( so at default 80 px are substracted for the arrows ) and you can also lower this for more thumbs.
is it possible to put a link on the images ( the main image offcourse not the thumbnails)
Yes, sure, write
instead of
I try to add links in the description but it breaks the script
Propably you are doing something like this
BAD:
data-description="My link is
here"
The problem is that the ” inside href breaks the ” from the data-description. The solutions is use ’ instead of “
GOOD:
data-description='My link is
here'
Hi. How can i stop the auto-sliding of the phoenixgallery
you have in the parameters
targetgallery.phoenixgallery({
transition_type:"random",
nav_type:"thumbsa",
nav_position:"up",
thumb_width:100,
thumb_height:75,
thumb_space:20,
nav_space:25,
nav_arrow_size:40,
settings_shadow:"off",
settings_autoresize:"off",
settings_autoheight:"off",
settings_pauseonrollover:"off",
settings_usethumbarrows:'off',
transition_strips_x:10,
transition_strips_y:5,
arrows_normal_alpha:1,
arrows_roll_alpha:0.3,
thumbs_normal_alpha:1,
thumbs_roll_alpha:0.3
})
to disable slideshow just add a new parameter settings_slideshow and set it to off like this
targetgallery.phoenixgallery({
transition_type:"random",
nav_type:"thumbsa",
nav_position:"up",
thumb_width:100,
thumb_height:75,
thumb_space:20,
nav_space:25,
nav_arrow_size:40,
settings_shadow:"off",
settings_autoresize:"off",
settings_autoheight:"off",
settings_slideshow:"off",
settings_pauseonrollover:"off",
settings_usethumbarrows:'off',
transition_strips_x:10,
transition_strips_y:5,
arrows_normal_alpha:1,
arrows_roll_alpha:0.3,
thumbs_normal_alpha:1,
thumbs_roll_alpha:0.3
})
For some reason when I add a link to the image the zoom effect no longer functions.
That is because the attributes data-initialZoom, data-finalZoom, data-effectTime etc. need to be on the direct child of the gallery div. For example if you have
< img src="img/1.jpg" data-finalZoom="2"/>
effect will work, but if you add link like this
< img src="img/1.jpg" data-finalZoom="2"/> effect won’t work. You need to move the attributes to the direct child of the gallery like so:
< img src="img/1.jpg" />
Credits
Creative photos – http://www.flickr.com/photos/markjsebastian/