CodeCanyon Ken Burns Media Gallery Slideshow 116150

CodeCanyon Ken Burns Media Gallery Slideshow 116150

CodeCanyon Ken Burns Media Gallery Slideshow 116150
JavaScript \ Image \ Media
Support \ Rotator \ Pictures \ Slideshow \ Thumbnails \ Zoom \ Video \ Transitions



JavaScript - Ken Burns Media Gallery Slideshow 116150 by ZoomIt @ CodeCanyon

JavaScript \ Image \ Media

Last Update: 14 June 11; Compatible Browsers: IE7, IE8, IE9, Firefox 2, Firefox 3, Firefox 4, Safari 4, Safari 5, Opera, Chrome; Software Version: jQuery 1.4, jQuery 1.5; Files Included: JavaScript JS, HTML, CSS.

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
<a href="http://codecanyon.net/item/ken-burns-media-gallery-slideshow/#"><img src="http://codecanyon.net/item/ken-burns-media-gallery-slideshow/img/def1.jpg" /></a>

instead of <img src="http://codecanyon.net/item/ken-burns-media-gallery-slideshow/img/def1.jpg" />

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 <a href="http://something">here</a>"

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 <a href="http://something">here</a>'
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

effect will work, but if you add link like this <a href="http://codecanyon.net/item/ken-burns-media-gallery-slideshow/#"></a> effect won’t work. You need to move the attributes to the direct child of the gallery like so: <a href="http://codecanyon.net/item/ken-burns-media-gallery-slideshow/#" data-finalzoom="2"></a>
Credits
Creative photos – http://www.flickr.com/photos/markjsebastian/

DZS WordPress Testimonial Rotator; DZS jQuery Mini Events Calendar; DZS Testimonial Rotator - jQuery powered; WordPress Timeline Slider; DZS Scroller - WordPress Scrollbar Plugin; Video Gallery - with Admin Panel; DZS Uploader - All purpose html5 uploader.

Keywords: arrows, custom navigation, effects, gallery, image, ken burns, numbers, pan, pictures support, rotator, slideshow, thumbnails, transitions, video support, zoom.



Tags: Slideshow, Gallery, Burns, Support, Rotator

Premium CodeCanyon Ken Burns Media Gallery Slideshow 116150 WordPress Themes, Website Templates, Mobile Themes, Flash Templates & Scripts from creative professional designers. Full details of CodeCanyon Ken Burns Media Gallery Slideshow 116150 for digital design and education. CodeCanyon Ken Burns Media Gallery Slideshow 116150 desigen style information or anything related.

Comments:

Name:*
E-Mail:*
Add Comments:
Enter Code: *