WorldWideScripts.net Delivering the best Add-Ons in more than 37 languages.

中文(简体), English, हिन्दी/हिंदी, Español/Castellano, العربية, Русский язык, Français, 中文 (台灣), বাংলা, Bahasa Indonesia, اردو, Português, Deutsch, Bahasa Melayu (بهاس ملايو‎), 日本語 (にほんご), فارسی, Italiano, తెలుగు, Türkçe, ગુજરાતી, Język polski/polszczyzna, Tiếng Việt, ಕನ್ನಡ, Українська мова, ไทย
JavaScript / Images and Media

Ken Burns Media Gallery / Slideshow

— Add-On to WorldWideScripts.net

Subscribe to our feed to stay up to date!

New! Follow us as you want it!


Ken Burns Media Gallery / Slideshow - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

WordPress Version

GALLERY supports images, video, audio inline Phone iPad compatible minute installation Ken Burns effect thumbnails navigation and more!

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="#"><img src="img/def1.jpg" /></a>

instead of

<img src="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="#"></a> 
effect won’t work. You need to move the attributes to the direct child of the gallery like so:
<a href="#" data-finalzoom="2"></a> 

Credits

Creative photos – http://www.flickr.com/photos/markjsebastian/

Download
Other components in this categoryAll components of this author
CommentsFrequently asked questions and answers

Properties

Created:
2 August 10

Last Update:
N/A

Compatible Browsers:
IE7, IE8, IE9, Firefox, Safari, Opera, Chrome

Files Included:
JavaScript JS, HTML, CSS

Software Version:
jQuery

Keywords

eCommerce, eCommerce, All Items, arrows, custom navigation, effects, gallery, image, ken burns, numbers, pan, pictures support, rotator, slideshow, thumbnails, transitions, video support, zoom