Home / Premium Pro Plugins / Ken Burns Media Gallery / Slideshow

Ken Burns Media Gallery / Slideshow

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...Loading...



DOWNLOAD

WordPress Model





Updates

UPDATE 2 .1 [ 14/06/2011 ]

  • added autoheight instance + api calls

UPDATE 2 .zero [ 09/06/2011 ]

  • fastened 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 . Every merchandise has a separate slideshow time and you may 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 impartial time for every merchandise that you may outline within the HTML supplied
  • 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 centered on the precise 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 many others.) , initialposition, last place (select from topleft,topcenter,topright,middleleft,middlecenter,middleright,bottomleft,bottomcenter,bottomright )
  • resizable to your most popular measurement – all contents will place correct

Potential panning positions ( preliminary and last )

FAQ

How you can 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 four?

You may’t set the variety of thumbnails displayed per ‘web page’ as a result of it’s calculated mechanically from thumb width / top and thumb area. So attempt to decrease that for extra thumbs. Additionally 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 can too decrease this for extra thumbs.

is it potential to place a hyperlink on the photographs ( the primary picture offcourse not the thumbnails)
Sure, certain, write

<a href="#"><img src="img/def1.jpg" /></a>

as a substitute of

<img src="img/def1.jpg" />

I attempt to add hyperlinks within the description nevertheless it breaks the script

Propably you might be 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 a substitute 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 might have 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:zero.three,
        thumbs_normal_alpha:1,
        thumbs_roll_alpha:zero.three
        )

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:zero.three,
        thumbs_normal_alpha:1,
        thumbs_roll_alpha:zero.three
        )

For some purpose once I add a hyperlink to the picture the zoom impact now not features.

That’s as a result of the attributes data-initialZoom, data-finalZoom, data-effectTime and many others. have to be on the direct baby of the gallery div. For instance when you’ve got


impact will work, however when you add hyperlink like this

<a href="#"></a> 

impact received’t work. It is advisable transfer the attributes to the direct baby of the gallery like so:

<a href="#" data-finalzoom="2"></a> 

Credit

Artistic photographs – http://www.flickr.com/photographs/markjsebastian/

DOWNLOAD

Check Also

preview.jpg

Mermaid Bootstrap Skin

DOWNLOAD The exact same Twitter Bootstrap however with a special and smooth mermaid format The ...

Inline-Banner.png

Restaurant Finder with backend Android Full App

DOWNLOAD Eating places finder Options : Helps Each Android Studio & Eclipse Close to By ...