Image Slideshow with Next/Prev Controls on Blog

The Image slideshow now in order to complete the previous image slider that is still very simple, but certainly it depends on your needs. I ask you, do you need the controls of the images slider that you have created? In some other case the Next/Prev Controls is needed by the users to navigate the image slider, so that the user can see some of the images that may some of them to be the most interest by the user, and the lightbox will show the selected image for more clear, with full size resolution and with the title or description of the images.


As a beginner in the jquery coding to create the image slideshow that more complex, it can confusing us how to implement Image Slideshow with Next/Prev Controls on blogger. But I think in the process to implement such a Jquery Cycle and Easing, we must really understand about the template and system of blog that we use, so that all the effects can be working properly as we expected.

According with the image slider previously, we are going to add the image slider with the navigation buttons: Next/Prev Controls that may be useful and needed by the users. This still about  implementing Jquery Cycle and Easing with the effect of scroll horizontally, by default the image slideshow will move to the left. But if you press prev (<) button, the images will move to the right one by one, meanwhile if you press the next (>) button the images will move to the left or toward default.

To create the Image Slideshow with Next/Prev Controls on Blog as above, There three steps are as follows:

1. Go to your blogger dashboard, Click on Template>Edit HTML. Inside script code of the template press Ctrl+F on your keyboard and find jquery.min.js, that should have been placed on the head section of the template, by typing only “min.js” you will find that. If you already found jquery.min.js link, Add the new additional javascript with jquery cycle and easing to create Image Slideshow with Next/Prev Controls. Let’s see the following picture and the script code below!


Javascript Code that must be added :

<script src='http://agratitudesign-template.googlecode.com/svn/trunk/jquery.cycle.all.js' type='text/javascript'/>
<script src='http://agratitudesign-template.googlecode.com/svn/trunk/jquery.easing.1.3.js' type='text/javascript'/>
<script type="text/javascript">
 $(document).ready(function(){
 $("#slideshow").css("overflow", "hidden");
 $("#art-slide").cycle({
 fx: 'scrollHorz', 
 easing: 'easeOutBack',
 delay:  -4000,
 prev: '#prev',
 next: '#next'
});
 $("#slideshow").hover(function() {
 $("#nav").fadeIn();
 },
 function() {
 $("#nav").fadeOut();
 });
});
</script> 

• The javascript code above use jquery cycle and easing with the scroll horizontal effect
• Initialize plugin use div id : #slideshow, #art-slide, #nav, that you must defined the css style, and then you need to capture those div id into html tag.

2. Still on the script code of the template, find the end of the skin template. Press Ctrl+F and type: skin, the press enter twice. Put the additional css just before ]]></b:skin> and define some css style for div id that used and other else that you require. Let’s see the following picture and css style script code!
CSS Script Code that must be added:

#container {
 width: 100%; 
 height: 300px;
 margin: auto;
 overflow:hidden;
}
#slideshow {
 width: 100%; 
 height: 300px;
 margin: auto;
 position: relative; z-index: 5;
 overflow:hidden;
}
#nav {
 position: absolute; 
 top: 110px; 
 z-index: 15;
}
#nav li:before {
 content: none !important;
}
#prev {
 float: left; 
 margin-left: 122px;
}
#next {
 float: left; 
 margin-left: 218px;
}
#nav li a {
 display: block; width: 35px; height: 35px; text-indent: -1000px;
}
#nav li#prev a {
 background: url(https://agratitudesign-template.googlecode.com/svn/tags/prev.png);
}
#nav li#next a {
 background: url(https://agratitudesign-template.googlecode.com/svn/tags/next.png);
}
#art-slide  {
width: 66%;
height: 300px;
margin: auto;
overflow:hidden;
}
#art-slide img {
padding: 15px;
border: 1px solid rgb(204, 204, 204);
background-color: rgb(238, 238, 238);
}
#art-slide li:before {
content: none !important;
}

• Change #nav li#prev a and #nav li#next a if you have button style as you wish 
• The width and height of image slideshow depending on the content width of your blog and image size that you have, adjust it to be match with your template.
• #nav li:before and #art-slide li:before, this for artisteer template, define it to remove the bullet style that may displayed on the image slideshow, may be like this # art-slide ul{list-style:none !important;}
   

3. Insert the html script code to the content post that you want to use Image Slideshow with Next/Prev Controls therein.  On the dashboard blog, select Post on the main menu and click edit to the post content that you want to add the image slideshow and you must insert it in the html mode of your editor. Let’s see the following picture and the html script code that you must added!



HTML Script Code For the Image Slideshow :

<div id="container">
 <div id="slideshow">
 <ul id="nav">
  <li id="prev"><a href="#">Previous</a></li>
  <li id="next"><a href="#">Next</a></li>
 </ul>
 <ul id="art-slide">
  <li><a class="lightbox" href="http://3.bp.blogspot.com/-F67hjGEZs0k/UcCyH186xsI/AAAAAAAADcc/ZicESkdGKBw/s1600/Balinese+Frame-1.jpg" imageanchor="1" title="Balinese Motif Carving as Frame-Download 1"><img src="http://3.bp.blogspot.com/-F67hjGEZs0k/UcCyH186xsI/AAAAAAAADcc/ZicESkdGKBw/s320/Balinese+Frame-1.jpg" /></a></li>
  <li><a class="lightbox" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjBEvEjGkDVfIkR5yzbbQLlkcBAgENln-U-AHyFwrrI41ZoCiErdRoBIqWue1g9C4GxFwwgG7WqMHSdMqRmJZ1HF4D08DCywcsRpts1EZj-S0nGywP6E9hyDvBQ17q5-n3_rb82iHtFFI/s1600/Balinese+Frame-2.jpg" imageanchor="1" title="Balinese Motif Carving as Frame-Download 2"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjBEvEjGkDVfIkR5yzbbQLlkcBAgENln-U-AHyFwrrI41ZoCiErdRoBIqWue1g9C4GxFwwgG7WqMHSdMqRmJZ1HF4D08DCywcsRpts1EZj-S0nGywP6E9hyDvBQ17q5-n3_rb82iHtFFI/s320/Balinese+Frame-2.jpg" /></a></li>
  <li><a class="lightbox" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi95L3_EP-mUY8ZjELrPCpMnMUQwpNbtPRKhJV86aNBwaNMlHxWNmI_jL4b0HKWy7Rud4K_ktXhydCNTYpmLKrIXPXxkVxHVPVJpx9QefkBGR74Yy5YWfjOYLnJB9MPpcWZJbHkBQc_MV4/s1600/Balinese+Frame-3.jpg" imageanchor="1" title="Balinese Motif Carving-Download 3"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi95L3_EP-mUY8ZjELrPCpMnMUQwpNbtPRKhJV86aNBwaNMlHxWNmI_jL4b0HKWy7Rud4K_ktXhydCNTYpmLKrIXPXxkVxHVPVJpx9QefkBGR74Yy5YWfjOYLnJB9MPpcWZJbHkBQc_MV4/s320/Balinese+Frame-3.jpg" /></a></li>
  <li><a class="lightbox" href="http://2.bp.blogspot.com/-tzeoH_u9uEc/UcF2OiVW7yI/AAAAAAAADdQ/71M8Os36V0s/s1600/Balinese+Frame+4.jpg" imageanchor="1" title="Balinese Frame-Download 4"><img src="http://2.bp.blogspot.com/-tzeoH_u9uEc/UcF2OiVW7yI/AAAAAAAADdQ/71M8Os36V0s/s320/Balinese+Frame+4.jpg" /></a></li>
  <li><a class="lightbox" href="http://1.bp.blogspot.com/-vodF-0zgz0w/Ucw7FtPyG0I/AAAAAAAADmI/Kr8giVLCPsc/s640/pelangkiran.jpg" imageanchor="1" title="Karang Bentala-Download 5"><img src="http://1.bp.blogspot.com/-vodF-0zgz0w/Ucw7FtPyG0I/AAAAAAAADmI/Kr8giVLCPsc/s320/pelangkiran.jpg" /></a></li>
  <li><a class="lightbox" href="http://2.bp.blogspot.com/-NAoblkBw5BU/UfI4dUG-cGI/AAAAAAAAD4o/YXc34i6wxJY/s1600/barong+boma.jpg" imageanchor="1" title="Karang Boma-Download 6"><img src="http://2.bp.blogspot.com/-NAoblkBw5BU/UfI4dUG-cGI/AAAAAAAAD4o/YXc34i6wxJY/s320/barong+boma.jpg" /></a></li>
  <li><a class="lightbox" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYiSZPUuiRztneTG9AulFQ3KbGr-L_cuHoDJSKExAenttQmhBNLMsGOGvkgQx-EyBFBB2SPWfGHdYiIk2LwWhl0L2m-KjwV-rAdhhH_bNphYDVRxU_eQbmEXaXpSY4Rz8QRjo1_xqGnDc/s1600/Maduwe+Karang+Temple+-+Vector.jpg" imageanchor="1" title="Maduwe Karang Temple Relief-Download 7"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYiSZPUuiRztneTG9AulFQ3KbGr-L_cuHoDJSKExAenttQmhBNLMsGOGvkgQx-EyBFBB2SPWfGHdYiIk2LwWhl0L2m-KjwV-rAdhhH_bNphYDVRxU_eQbmEXaXpSY4Rz8QRjo1_xqGnDc/s320/Maduwe+Karang+Temple+-+Vector.jpg" /></a></li>
 </ul>
 </div>
</div>

The image code above has completed with class lightbox, and title of the image. One the advantage to put the images on the google plus, you just need to define the image size with s320, that is mean the width of the image will be 320px and the height will be proportional. If still confused about it, let’s see this article video! see you!