jquery Sliding Image Gallery

Transcription

1 jquery Sliding Image Gallery Copyright 2011 FlashBlue Website : [email protected] Twitter: Directories source - Original source files other files are part of the source, you do not need to upload any of these to your server. Use these to change the code or style. deploy Published files for adding item to the site. These are the files you need to upload to your server. help Help files (Word, PDF) Installation Installing the rotator requires the following steps. 1. Including the rotator's css file. 2. Including the javascript files. 3. Specifying the html tags of the rotator within your page. 4. Instantiating a javascript function call with any optional parameters. Below describes these steps in more detail. In step 1, to include the rotator's css file sliding-image-gallery.css, simply specify the following line of code within your <head> tag:

2 <link rel="stylesheet" type="text/css" href="sliding-image-gallery.css"/> In step 2, you will need to include the jquery's library file and the rotator's file jquery.sliding-image-gallery.js which is located in the js directory. The code below shows the include in a html page: <script type="text/javascript" src=" <script type="text/javascript" src="js/jquery.sliding-image-gallery.js"></script> Note: The css, js files are the compressed production version of the file. If you intend to modify the banner rotator's source code, you will need to look at files in source folder and it is recommended that you minify the modified file afterwards. Additionally, if you plan on using transition easing other than the default "" or "linear", you must include the jquery.easing.1.3.min.js file in your page. Its include can be placed after the jquery include but before the jquery.sliding-image-gallery.js include. In step 3, to specify the tags of the rotator itself, refer to the example in the index.html file. In that file, you'll see a block of tag starting and ending with: <div class="banner">  </div> You can use this as a template and copy and paste it onto your own page, but will have to modify it accordingly with your own image/item information. Finally in step 4, you will need to instantiate a javascript function call to get the rotator initialized. The example code looks like this below:

3 <script type="text/javascript"> $(document).ready(function() { $(".banner").slidingimagegallery(); } ); </script> This will instantiate the rotator using the default parameters Adding Content In order to add or change content to the rotator, you will have to specify a set of tags for each item within the rotator's html tags. The list of items is represented as a <ul> tag and each item is represented by a <li> tag. Below is an example of what the tags would look like for an item. You will have to repeat this for as many items as needed for your rotator within the <ul> tag. <li effect="fade" delay="5000"> <div class="button"> <p> <span class="title">lorem Ipsum</span> Lorem ipsum per augue platonem gubergren at, affert signiferumque in. </p> </div> <a href="images/myimage.jpg"></a> <a href=" target="_blank"></a> <div style="top:10px; left:25px; width:300px; height:0; color:#000000; background-color:#ffffff;" radius="6 >

4 <h1>lorem Ipsum</h1> Lorem ipsum eos et nonumy delenit, ea nam petentium suavitate, in utinam torquatos cum. Tritani facilisi at pro, tation quaeque usu at, kasd ullum fuisset at nam. No sed decore. </div> </li> The example above shows that each item entry begins with an opening and closing <li> tag. The <li> tag contains an optional attribute named effect in which an individual effect/transition type can be assigned for the item. Refer to the transitions table for a list of available transitions. Note: you can mix different effects except for the h.slide and v.slide effect. Also, there is another optional attribute named delay for the <li> tag. This is for assigning an individual timer delay for rotation. The delay time is in milliseconds. Inside the <li> tag, the first tag is a <div> tag with class named button. This <div> tag represents the visual components of the list item. The <img> tag represents the thumbnail image and the <p> tag represents the item's caption. Next, after the <div> tag, there is an <a> tag for specifying the banner's image. The banner's image url can be assigned through the href value. After the first <a> tag, there is a second optional <a> tag. This is for specifying the clickable link surrounding the banner when displayed. You can also specify the target for the link here also. If you do not want a link associated with a particular banner, you can omit this tag. Finally, the last <div> tag represents the description use for the text box when the item is selected. You can specify html tags and text within this <div> tag. If you do not want a description assigned to a particular banner, you can leave the text empty.

5 This <div> tag also can contains 6 css style attributes (top, left, width, height, color, and background-color) and radius attribute for rounded border radius. You can specify the left and top position of the text box, the width and height, and the color and background color with these attributes. If you want the text box's height to be determined automatically, just set a value of 0. Also, color defaults to white and background color defaults to black if they are not specified. Plugin Parameters You can change some common attributes of the rotator through the parameters of the plugin. Below is an example of the attributes being specified with corresponding values. Note: if you want to leave a parameter with its default value, you can omit that parameter in the javascript call. <script type="text/javascript"> $(document).ready( function() { $(".banner").slidingimagegallery({ buttonposition:"right", transition:"random", }); } ); </script> The table below describes each attribute in more detail:

6 Parameters: width Gallery image / swf width. height Gallery image / swf height. currentitem Item number from (0) to (item count-1) which to be shown first. randomize Randomize item view order. autoplay Specify if image rotation initially starts. playonce Specify if rotation plays only once through. buttonposition The alignment of the item list. (left, right) buttonwidth Button width. buttonheight Button height. buttondisplaylength The number of items display at a time. buttonshowarrow Show arrow icon on selected button. autoadjust To specify if items' position are automatically adjusted when image rotates. delay The global time delay for image rotation in milliseconds. If delay is set per item, it will take precedence over this global delay transition The global transition use for images. If transition is set per item, it will take precedence over this global transition.

7 transitionspeed The transition speed/duration use for image transition in milliseconds. easing The easing used for image transition. Note: To use easing other than "" (none) or "linear", you must include js/ jquery.easing.1.3.min.js showtimer To specify if the timer indicator bar is visible. timeralign The alignment of the timer indicator. (bottom, top) pauserollover To specify if rotation pauses on mouseover and resumes on mouseout. autocenter If images are automatically centered. textrollover To specify if the text box appears only on mouseover and hides on mouseout. texteffect The transition effect used for text box transition. (none, fade, up, down, left, right) textsync If true, text box appears after image transition is completed. If false, text box appears immediately without synching with image transition. blocksize The size of the blocks use for block transitions. verticalsize The size of the vertical stripes use for vertical stripe transitions. horizontalsize The size of the horizontal stripes use for horizontal stripe transitions. blockdelay The delay until the next block transition occurs in sequence. (in milliseconds) verticalstripedelay The delay until the next vertical stripe transition occurs in sequence. (in milliseconds) horizontalstripedelay The delay until the next horizontal stripe transition occurs in sequence. (in milliseconds)

8 scrolltype The scrolling type use for navigating the list. Note: If you specify "none", navigation of list is done through item click. (mouse_move, mouse_over, mouse_click, none) showscrollbar To specify if the scroll bar indicator is visible. moveby1 Used when scroll_type is "mouse_click" only. If true, list items move by one unit per click. If false, list items move by the number set in item_display. Transitions Table: Transition Value Description Category none No transition N/A fade Fade in transition h.slide Horizontal slide transition v.slide Vertical slide transition random Random transition (random only includes all the transitions listed below) block.top Blocks expand, starting from top. Blocks

9 block.bottom Blocks expand, starting from bottom. block.left Blocks expand, starting from left. block.right Blocks expand, starting from right. diag.fade Blocks fade in, starting diagonally. diag.exp Blocks expand, starting diagonally. rev.diag.fade Blocks fade in, reverse diagonally. rev.diag.exp Blocks expand, reverse diagonally. block.fade Blocks fade in at random speed. block.exp Blocks expand at random speed. block.drop Blocks fall at random speed. block.top.zz Blocks fade in, start from top and zig zag down. block.bottom.zz Blocks fade in, start from bottom and zig zag top. block.left.zz Blocks fade in, start from left and zig zag right. block.right.zz Blocks fade in, start from right and zig zag left. spiral.in Blocks fade in, spiraling in.

10 spiral.out Blocks fade out, spiraling out. vert.random.fade Vertical stripe fade in at random. Vertical Stripe vert.tl Vertical stripe transition starting top left. vert.tr Vertical stripe transition starting top right. vert.bl Vertical stripe transition starting bottom left. vert.br Vertical stripe transition starting bottom right. fade.left Vertical stripe transition fade starting from left. fade.right Vertical stripe transition fade starting from right. alt.left Alternating vertical stripe transition starting from left. alt.right Alternating vertical stripe transition starting from right. blinds.left Vertical blinds transition starting from left. blinds.right Vertical blinds transition starting from right. horz.random.fade Horizontal stripe fade in at random. Horizontal Stripe horz.tl Horizontal stripe transition starting top left. horz.tr Horizontal stripe transition starting top right.

11 horz.bl Horizontal stripe transition starting bottom left. horz.br Horizontal stripe transition starting bottom right. fade.top Horizontal stripe transition fade starting from top. fade.bottom Horizontal stripe transition fade starting from bottom. alt.top Alternating horizontal stripe transition starting from top. alt.bottom Alternating horizontal stripe transition starting from bottom. blinds.top Horizontal blinds transition starting from top. blinds.bottom Horizontal blinds transition starting from bottom. Good Luck using the file in your projects!