Ken Burns Media Gallery / Slideshow
WordPress Version
Updates
UPDATE 2.1 [ 14/06/2011 ]
- added autoheight instance + api calls
UPDATE 2.0 [ 09/06/2011 ]
- mounted bugs
- rebranded to Phoenix Gallery – similar gallery options + extra
- added thumbnail navigation
Introduction
jQuery Ken Burns Slideshowis the right approach to showcase your footage/adverts in type. Each merchandise has a separate slideshow time and you may edit their hyperlink, goal and plenty of different particular person settings simply by modifying the HTML.
Features
- helps .PNGs, .JPGs, .GIFs
- API – name pause, play, gotoNext, gotoPrev out of your html (outdoors the gallery)
- autoheight – choice to autosize the gallery relying on the peak of the content material
- helps limitless objects – rotate as many footage as you would like
- slideshow mode – with impartial time for every merchandise that you could outline within the HTML offered
- values you possibly can arrange for every merchandise – description (the outline from the highest), initialZoom(any worth you would like), finalZoom, slideshowTime ( the time the banner rotator stays targeted on the particular merchandise ), burn impact time ( the time you would like the impact to take ), url (if no url is ready the merchandise will simply be a picture with no hyperlink on click on ), transitionType(easeInSine,linear and so forth.) , initialposition, remaining place (select from topleft,topcenter,topright,middleleft,middlecenter,middleright,bottomleft,bottomcenter,bottomright )
- resizable to your most well-liked dimension – all contents will place correct
Possible panning positions ( preliminary and remaining )
FAQ
How to set the variety of thumbnails, I’ve this portrait photographs within the slider.. the navigation solely exhibits 2 of them, whereas there’s area for 4?
You can’t set the variety of thumbnails displayed per ‘web page’ as a result of it’s calculated robotically from thumb width / peak and thumb area. So attempt to decrease that for extra thumbs. Also there’s one other parameter “nav_arrow_size:40” – that is the area that’s allotted for every arrow ( so at default 80 px are substracted for the arrows ) and you may also decrease this for extra thumbs.
is it potential to place a hyperlink on the photographs ( the principle picture offcourse not the thumbnails)
Yes, positive, write
<a href="#"><img src="img/def1.jpg" /></a>
as an alternative of
<img src="img/def1.jpg" />
I attempt to add hyperlinks within the description but it surely breaks the script
Propably you’re doing one thing like this
BAD:
data-description="My hyperlink is <a href="http://something">here</a>"
The downside is that the ” inside href breaks the ” from the data-description. The options is use ’ as an alternative of “
GOOD:
data-description='My hyperlink is <a href="http://something">here</a>'
Hi. How am i able to cease the auto-sliding of the phoenixgallery
you’ve within 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 simply add a brand 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 purpose once I add a hyperlink to the picture the zoom impact now not features.
That is as a result of the attributes data-initialZoom, data-finalZoom, data-effectTime and so forth. must be on the direct little one of the gallery div. For instance when you’ve got
< img src="img/1.jpg" data-finalZoom="2"/>
impact will work, however in the event you add hyperlink like this
<a href="#">< img src="img/1.jpg" data-finalZoom="2"/></a>
impact received’t work. You want to maneuver the attributes to the direct little one of the gallery like so:
<a href="#" data-finalzoom="2">< img src="img/1.jpg" /></a>
Credits
Creative pictures – http://www.flickr.com/photos/markjsebastian/
