SlideViewer

What’s this? slideViewer is a lightweight (3.5Kb) jQuery plugin wich allows to instantly create an image gallery by writing just few lines of HTML such as an unordered list of images:

 

 

  1. <div id="mygalleryinpost10.12.2006" class="svw">
  2. <ul>
  3. <li><img src="picts/10.jpg" alt="my description for this image" /></li>
  4. <li><img src="picts/08.jpg" alt="this is my dog..." /></li>
  5. <li><img src="picts/03.jpg" alt="my dog eating the cat" /></li>
  6. <li><img src="picts/05.jpg" alt="my r/c helicopter crashing..." /></li>
  7. <!--eccetera-->
  8. </ul>
  9. </div>

slideViewer checks for the number of images within your list, and dinamically creates a set of links to command (slide) you pictures. Also, clicking on each image will make the gallery slide forward or backward, depending on the area you are clicking (eg: clicking the left part of a picture will move the slides backward, and viceversa for the right part of the picture).

You can optionally customize the kind of animation and its duration and also enhance(*) the default tooltips with some fancy tooltips.

You can choose where to put the user interface (the numbered links); it can be above or below your set of images.

You don’t need to specify the width and height for your images (but all the images within a single gallery must have the same width/height!) because slideViewer automatically checks for the size and renders accordingly. But if you can’t live without declaring your images size, slideViewer will use your declared dimensions. Pretty flexible.

How many galleries per page? As much as you like. slideViewer will instantly create a gallery for each list of images you wish to render as a gallery. This may be useful to instantly create a gallery within one or more posts in a blog.

Installation is preatty easy. slideViewer requires jQuery 1.4.1 and the jQuery easing.1.2 plugin to work:

  1. <script src="jquery-1.4.1.min.js" type="text/javascript"></script>
  2. <script src="jquery.easing.1.2.js" type="text/javascript"></script>
  3. <script src="jquery.slideviewer.1.2.js" type="text/javascript"></script>

Optional enhanced toolTips: adding fancy toolTips to your galleries is pretty easy, just add toolTip: true as illustrated below.

slideViewer’s basic CSS:

  1. /*preload classes*/
  2. .svw {width: 50px; height: 20px; background: #fff ;}
  3. .svw ul {position: relative; left: -999em;}
  4. /*core classes*/
  5. .stripViewer {
  6. position: relative;
  7. overflow: hidden;
  8. border: 5px solid #ff0000 ;
  9. margin: 0 0 1px 0;
  10. }
  11. .stripViewer ul { /* this is your UL of images */
  12. margin: 0;
  13. padding: 0;
  14. position: relative;
  15. left: 0;
  16. top: 0;
  17. width: 1%;
  18. list-style-type: none;
  19. }
  20. .stripViewer ul li {
  21. float:left;
  22. }
  23. .stripTransmitter {
  24. overflow: auto;
  25. width: 1%;
  26. }
  27. .stripTransmitter ul {
  28. margin: 0;
  29. padding: 0;
  30. position: relative;
  31. list-style-type: none;
  32. }
  33. .stripTransmitter ul li{
  34. width: 20px;
  35. float:left;
  36. margin: 0 1px 1px 0;
  37. }
  38. .stripTransmitter a{
  39. font: bold 10px Verdana, Arial;
  40. text-align: center;
  41. line-height: 22px;
  42. background: #ff0000 ;
  43. color: #fff ;
  44. text-decoration: none;
  45. display: block;
  46. }
  47. .stripTransmitter a:hover, a.current{
  48. background: #fff ;
  49. color: #ff0000 ;
  50. }
  51. /*tooltips formatting*/
  52. .tooltip
  53. {
  54. padding: 0.5em;
  55. background: #fff ;
  56. color: #000 ;
  57. border: 5px solid #dedede ;
  58. }

Setup: create a DIV with an unique ID and class=”svw” and inside that DIV, create a list of images (an unordered list):

  1. <div id="mygalone" class="svw">
  2. <ul>
  3. <li><img alt="abc defrg thysu ooip jkifbtg fff" src="picts/01.jpg" /></li>
  4. <li><img alt="abc defrg thysu ooip jkifbtg fff" src="picts/02.jpg" /></li>
  5. <li><img alt="abc defrg thysu ooip jkifbtg fff" src="picts/03.jpg" /></li>
  6. <li><img alt="abc defrg thysu ooip jkifbtg fff" src="picts/04.jpg" /></li>
  7. <!-- eccetera -->
  8. <li><img alt="abc defrg thysu ooip jkifbtg fff" src="picts/15.jpg" /></li>
  9. </ul>
  10. </div>

Ready to fly in 10 seconds! Now that we have our list ready, let’s make it slide!

Add fancy tooltips (and optionally set their opacity)?

Custom easing functions: you can customize the kind of animation and its duration; time is expressed in milliseconds eg: 1700.

Supported browsers: slideViewer have been tested with IE6, IE7, IE8, FF3.5, Opera 9, Chrome 2.0

Usecase 1 width and height have not been declared, nor the kind of easing function and its duration; this is the simplest use

 

 

Did you know? if your galleries are made of a large number of images, probably you’ll get two or more rows of links. Don’t worry, they’ll never go further your gallery right border.

HTML

  1. <div id="mygalone" class="svw">
  2. <ul>
  3. <li><img alt="abc defrg thysu ooip jkifbtg fff" src="picts/01.jpg" /></li>
  4. <li><img alt="abc defrg thysu ooip jkifbtg fff" src="picts/02.jpg" /></li>
  5. <li><img alt="abc defrg thysu ooip jkifbtg fff" src="picts/03.jpg" /></li>
  6. <li><img alt="abc defrg thysu ooip jkifbtg fff" src="picts/04.jpg" /></li>
  7. <!-- eccetera -->
  8. </ul>
  9. </div>

JS

  1. <script type="text/javascript">
  2. $(window).bind("load", function() {
  3. $("div#mygalone").slideView()
  4. });
  5. </script>

Usecase 2 width and height have been declared: the script will use that values; also the kind of easing function and duration of the effect have been customized (easeFunc: “easeInOutBack”, easeTime: 2200)

 

 

HTML

  1. <div id="mygaltwo" class="svw">
  2. <ul>
  3. <li><img width="350" height="200" alt="abc" src="picts/03.jpg" /></li>
  4. <li><img width="350" height="200" alt="defrg" src="picts/04.jpg" /></li>
  5. <!-- eccetera -->
  6. </ul>
  7. </div>

JS

  1. <script type="text/javascript">
  2. $(window).bind("load", function() {
  3. $("div#mygaltwo").slideView({
  4. easeFunc: "easeInOutBack",
  5. easeTime: 2200
  6. });
  7. });
  8. </script>

easeInOutSine, toolTips, UI on top? (easeFunc: “easeInOutSine”,easeTime: 500, uiBefore: true, ttOpacity: 0.5, toolTip: true)

 

 

toolTips! Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard.

Dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in.

The 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

HTML

  1. <div id="mygalthree" class="svw">
  2. <ul>
  3. <li><img alt="abc" src="picts/10.jpg" /></li>
  4. <li><img alt="abc" src="picts/08.jpg" /></li>
  5. <li><img alt="abc" src="picts/05.jpg" /></li>
  6. <!--eccetera-->
  7. </ul>
  8. </div>

JS

  1. <script type="text/javascript">
  2. $(window).bind("load", function() {
  3. $("div#mygalthree").slideView({
  4. easeFunc: "easeInOutSine",
  5. easeTime: 500,
  6. uiBefore: true, //you can optionally draw the ui before the slider's images
  7. ttOpacity: 0.5,
  8. toolTip: true
  9. });
  10. });
  11. </script>

 

Download:http://www.mediafire.com/file/kzmml47a5lmqieg/jquery.slideviewer.1.2.rar

Leave a comment