Skip to content

Simple image gallery using JQuery SlideViewer (part 4)

September 4, 2013

jquery.slideviewer.1.2.js creates a simple gallery from three javascript files. This Gallery will be the part of the sign up page for site project. But to be able to use this plug in, first is to download the scripts and create a source link from the page(the sign up page). Then to be able use the images to the gallery is actually very simple, that is to name a div’s class “svw” and id to mygalone. Simple. They got the downloads and complete tuts here .Credit to the developers.

HTML CODE

  1. the start of the head
  2. <head>
  3. <title>web developing: Explore and Discover</title>
  4. links to the css.
  5. <link href = “css/image_gallery_body.css” media = “all” rel = “stylesheet” type = “text/css” >
  6. the three line of codes links us to a type of jquery. the downloads are available below
  7. <script src=”js/jquery-1.4.1.min.js” type=”text/javascript”></script>
  8. <script src=”js/jquery.easing.1.2.js” type=”text/javascript”></script>
  9. <script src=”js/jquery.slideviewer.1.2.js” type=”text/javascript”></script>
  10. this part creates how the gallery animates
  11. <script type=”text/javascript”>
  12. $(window).bind(“load”, function() {
  13. $(“div#mygalone”).slideView()
  14. });
  15. </script>
  16. </head>

Below are the codes in which we put it in the body. also, note that you can’t change the class name, unless you edit the slide viewer. also, the id name can be changed, just be sure to edit the line with Mygalone in the script tag inside the head of the page.

HTML CODE

  1. start of the div tag that wraps the gallery
  2. <div class =”left” >
  3. <div id=”mygalone” class=”svw”>
  4. <ul>
  5. below are the 5 cat images located from the picts folder.
  6. <li><img alt=”cat 1″ src=”picts/01.jpg” /></li>
  7. <li><img alt=”cat 2″ src=”picts/02.jpg” /></li>
  8. <li><img alt=”cat 3″ src=”picts/03.jpg” /></li>
  9. <li><img alt=”cat 4″ src=”picts/04.jpg” /></li>
  10. <li><img alt=”cat 5″ src=”picts/05.jpg” /></li>
  11. </ul>
  12. </div>
  13. </div>

Below is the snapshot of the gallery

cats gallery

The css code for the gallery alone.

CSS CODE

  1. DIV.left
  2. {
  3. float: left;
  4. margin: 0px;
  5. padding: 0px;
  6. background-color: #EB9E54;
  7. }
  8. .svw
  9. {
  10. width: 50px;
  11. height: 20px;
  12. background: #FFF;
  13. }
  14. .svw UL
  15. {
  16. position: relative;
  17. left: -999em;
  18. }
  19. /*core classes*/
  20. .stripViewer
  21. {
  22. position: relative;
  23. overflow: hidden;
  24. margin: 0 0 1px;
  25. border: 2px groove #000000;
  26. }
  27. .stripViewer UL
  28. {
  29. /*this is your UL of images*/
  30. margin: 0;
  31. padding: 0;
  32. position: relative;
  33. left: 0;
  34. top: 0;
  35. width: 1%;
  36. list-style-type: none;
  37. }
  38. .stripViewer UL LI
  39. {
  40. float: left;
  41. }
  42. .stripTransmitter
  43. {
  44. overflow: auto;
  45. width: 1%;
  46. }
  47. .stripTransmitter UL
  48. {
  49. margin: 0;
  50. padding: 0;
  51. position: relative;
  52. list-style-type: none;
  53. }
  54. .stripTransmitter UL LI
  55. {
  56. width: 20px;
  57. float: left;
  58. margin: 0 1px 1px 0;
  59. }
  60. .stripTransmitter A
  61. {
  62. font: bold 10px Verdana, Arial;
  63. text-align: center;
  64. line-height: 22px;
  65. background: #FF0000;
  66. color: #FFF;
  67. text-decoration: none;
  68. display: block;
  69. }
  70. .stripTransmitter A:hover, A.current
  71. {
  72. background: #FFF;
  73. color: #580D0D;
  74. }
  75. /*tooltips formatting*/
  76. .tooltip
  77. {
  78. padding: 0.5em;
  79. background: #FFF;
  80. color: #000;
  81. border: 5px solid #DEDEDE;
  82. }
  83. this changes the sizes of the images thus also change the size of the gallery
  84. IMG
  85. {
  86. width: 500px;
  87. height: 381px;
  88. }

DOWNLOAD CODES HERE

GO TO PART 3

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

TurtleAndRobot.com

Children's Book Reviews

Malav Shah

official Web Site

My Road to Programming

The journey of how I taught myself to program.

paritoshmishra

Look at what's brewing up guys! we all are work in progress. So don't meander, lets micromesh everything and have candid conversation about every problem related to C, C++ and JAVA. We can rejuvenate the crinkled faces.

ProgramThat;

A simple guide to programming...

ITechonology

Information Techonology

Rahul's Work

My Work Tips and Tutorial on Various Tech.

Turnip Farmers

Kingdom Scans

Gigaom

Technology news, trends and analysis covering mobile, big data, cloud, science, energy and media

The Neighborhood

society online's social conscious

HarsH ReaLiTy

A Good Blog is Hard to Find

VentureBeat

News About Tech, Money and Innovation

retireediary

The Diary of a Retiree

50 Year Project

My challenge to visit 192 countries, read 1,001 books, and watch the top 100 movies

[BTW] : Ben Trube, Writer

Writer, Programmer, Singer

My Arch Walkthrough

Arch linux made easy

Don Charisma

because anything is possible with Charisma

SutoCom Solutions

Success & Satisfaction with the Cloud

%d bloggers like this: