header-menu

Friday, May 24, 2013

How to make an Image Galley for Blogger or for your Website

There are times when you have to show a number of images in a very simple format. While blogger gives you an option to just upload images in a post, it does not give you a simple option to make an image gallery. To know what I am talking about, scroll to the bottom of this post.

For people like me, who came here from wordpress, image gallery is something that just exists and has to be there in posts. So, I made myself one and here is how I did it.

1- Choose your images on your computer, cut them to an internet friendly size and upload them to a web-space. Once you upload them, you can then copy the links to each of the images that you need in your gallery.

[In case you dont have a web-space to upload images to, then you can just use blogger to do it. To know how to do it Read this post]

 2 - Once you the links to the images, then you need to write the code for the gallery. The code will consist of 3 sections, HTML, Javascript and CSS.  Now create a new post or page where you need to insert your galley. If you working on blogger or any other online CMS, then go to the HTML mode to paste the following code. If you are working on your self coded website, then just go ahead and paste it in the <head> section.

[In the below code path/to/image refers to the path to the image files which you have uploaded as per the point-1]

 [In the below code, the variable stages on line 2, is the number of images in your gallery. If you are using a different number of images than 4, then change the value. Right now if is 3. For example, if you are using 10 images, then change it to 9]

 The javascript code

  1. <script type="text/javascript">
  2. var stages = 3;
  3. var stage = 0;
  4. var images = new Array("path/to/image","path/to/image","path/to/image","path/to/image");
  5. function shekhooNext()
  6. {
  7. stage++;
  8. if(stage>stages) stage = 0;
  9. document.getElementById('shekhoo-image').src=images[stage];
  10. }
  11. function shekhooPrev()
  12. {
  13. stage--;
  14. if(stage<0) stage = stages;
  15. document.getElementById('shekhoo-image').src=images[stage];
  16. }
  17. </script>
3- Now, comes the CSS code. paste this immediately after the javascript code. If you are working on a self coded website, then this part also comes in the <head> section.

[In the below code, the display size of the images is determined by the width mentioned in line 4. You can change the size by changing the value of width]

  1. <style>
  2. #shekhoo-gallery-container
  3. {
  4. width:500px;
  5. height:auto;
  6. display:block;
  7. }
  8. #shekhoo-gallery
  9. {
  10. width:100%;
  11. height:auto;
  12. }
  13. #shekhoo-image
  14. {
  15. width:100%;
  16. }
  17. #shekhoo-gallery button
  18. {
  19. height:20px;
  20. background-color:#093;
  21. width:auto;
  22. padding:2px 5px 2px 5px;
  23. text-align:center;
  24. width:60px;
  25. position:relative;
  26. top:-40px;
  27. z-index:+999;
  28. border:none;
  29. color:#FFF;
  30. font-size:10px;
  31. }
  32. #shekhoo-gallery button:hover
  33. {
  34. background-color:#CC0;
  35. }
  36. #shekhoo-button-prev 
  37. {
  38. left:-5px;
  39. }
  40. #shekhoo-button-next
  41. {
  42. left:380px;
  43. }
  44. </style>
4- Finally comes the html code, where the actually visible part is written. This should be pasted immediately after the CSS. If you are working on a self coded website, then paste this in the part of this page where you want it to appear.

  1. <div id="shekhoo-gallery-container">
  2. <div id="shekhoo-gallery">
  3.      <img id="shekhoo-image" src="" /><script type="text/javascript">document.getElementById('shekhoo-image').src=images[stage];</script>
  4.         <button id="shekhoo-button-prev" onclick="shekhooPrev()">PREVIOUS</button>
  5.         <button id="shekhoo-button-next" onclick="shekhooNext()">NEXT</button>     
  6.     </div>
  7. </div>
5- Now that all the parts are done. You can save the post/page and try out the side show. Except for the images, it should look like the one shown below.




Posted by at
Labels: ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)