WordPress Model
Updates
UPDATE 2.1 [ 14/06/2011 ]
- added autoheight instance + api calls
UPDATE 2.0 [ 09/06/2011 ]
- mounted bugs
- rebranded to Phoenix Gallery – identical gallery options + extra
- added thumbnail navigation
Introduction
jQuery Ken Burns Slideshowis the proper solution to showcase your photos/advertisements in model. Every merchandise has a separate slideshow time and you’ll edit their hyperlink, goal and lots of different particular person settings simply by modifying the HTML.
Options
- 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 photos as you would like
- slideshow mode – with unbiased time for every merchandise that you may outline within the HTML supplied
- values you’ll be able to 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
Doable panning positions ( preliminary and remaining )
FAQ
The way to set the variety of thumbnails, I’ve this portrait photographs within the slider.. the navigation solely reveals 2 of them, whereas there may be area for 4?
You possibly can’t set the variety of thumbnails displayed per ‘web page’ as a result of it’s calculated routinely from thumb width / peak and thumb area. So attempt to decrease that for extra thumbs. Additionally there may be 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 can even decrease this for extra thumbs.
is it doable to place a hyperlink on the pictures ( the primary picture offcourse not the thumbnails)
Sure, 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 nevertheless it breaks the script
Propably you’re doing one thing like this
BAD:
data-description="My hyperlink is <a href="http://one thing">right here</a>"
The issue 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://one thing">right here</a>'
Hello. How am i able to cease the auto-sliding of the phoenixgallery
you’ve got 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 cause once I add a hyperlink to the picture the zoom impact not capabilities.
That’s as a result of the attributes data-initialZoom, data-finalZoom, data-effectTime and so forth. should be on the direct youngster of the gallery div. For instance in case you have
< img src="img/1.jpg" data-finalZoom="2"/>
impact will work, however if you happen to add hyperlink like this
<a href="#">< img src="img/1.jpg" data-finalZoom="2"/></a>
impact received’t work. You should transfer the attributes to the direct youngster of the gallery like so:
<a href="#" data-finalzoom="2">< img src="img/1.jpg" /></a>
Credit
Inventive pictures – http://www.flickr.com/photos/markjsebastian/
Source
