Jquery Image Items Slider Caroufredsel for Blogger

The content images or the album images in a large number feels much more effective to show in some smaller image items or the image thumbnail items, so that the users can see some images in a smaller size relatively to navigate and scroll that some image items that we specify before. If the user wants to see in more detail that they desired, the image slider will look more beautiful by combining with image lightbox. This is yet another alternative for those of you who need the image slider of the content of blog and want to make the blog content more engaging and interactive.

In order to make the image slider items we will use jquery caroufredsel that equipped with next prev mouse navigation and pagination controls for the user, which will make your blog content more beautiful. Implementing of the jquery image slider caroufreadsel for the image items in the content blog, must be use list of the images such as <ul> and <li> tag as the others image slider that I have discussed previously. You have to adjust the distance of the image items that is displayed and the users can scroll per number of image items that is displayed.

1. Create HTML Script Code for Image Items Slider Caroufredsel.  Here I’ll take the html script code for the images of my content blog that completed with the lightbox effect, description, etc. Then make the complete  HTML Script Code for Image Items Slider Caroufredsel from that. So that the Html Script Code would be like this:

<div id="wrap-carousel">
 <div id="carousel">
  <ul>
   <li><a class="lightbox" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoTkjfZEmE71cvXZLeTKXPThDH45LQ95EMp4Xg5FwaAfxI2BcK-fFyi1KhssVT6XIVAgV6dlyMIGCyj_edcyCLZ4EGypprwC3BW11tnVJjAFgMeHhcxzcXJLZ9uZvSYJnAhSp6P6AZiLY/s1600/Kalender-Wedding2013-b.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" title="January"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoTkjfZEmE71cvXZLeTKXPThDH45LQ95EMp4Xg5FwaAfxI2BcK-fFyi1KhssVT6XIVAgV6dlyMIGCyj_edcyCLZ4EGypprwC3BW11tnVJjAFgMeHhcxzcXJLZ9uZvSYJnAhSp6P6AZiLY/s200/Kalender-Wedding2013-b.jpg" width="141" /></a></li>
   <li><a class="lightbox" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRgnBIDrQnwY9dVWc8ltH-FgVPzfsxWmqadpPxYNu8IkWDG2vR_KWbPBcELTJfl4oUqacJzMZInJLwgVMzahtPDQ7fESjGCJWMXVtwIxpNiyy02Oien3f9q2XvyzczluoyoHxW3CraFY8/s1600/Kalender-Wedding2013-c.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" title="February"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRgnBIDrQnwY9dVWc8ltH-FgVPzfsxWmqadpPxYNu8IkWDG2vR_KWbPBcELTJfl4oUqacJzMZInJLwgVMzahtPDQ7fESjGCJWMXVtwIxpNiyy02Oien3f9q2XvyzczluoyoHxW3CraFY8/s200/Kalender-Wedding2013-c.jpg" width="141" /></a></li>
   <li><a class="lightbox" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF3IOpWZxorP8R6pvuiqDwPJbyGJ2egN9E49jSSwKRj-2EdAnI9OYDGvCrvRvHyhAFe2bPHwYGMRixDVLA2-GE0mw6Ep3LUU6DeoZ7DSnphkajylV73l7rsiN1_mUdranxuPwfBfFtzvo/s1600/Kalender-Wedding2013-d.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" title="March"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF3IOpWZxorP8R6pvuiqDwPJbyGJ2egN9E49jSSwKRj-2EdAnI9OYDGvCrvRvHyhAFe2bPHwYGMRixDVLA2-GE0mw6Ep3LUU6DeoZ7DSnphkajylV73l7rsiN1_mUdranxuPwfBfFtzvo/s200/Kalender-Wedding2013-d.jpg" width="141" /></a></li>
   <li><a class="lightbox" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjumu35Q1_ZYKibFOJ_6LUx43An3yLc0zONfqLG7O2tWwVXbe5i3X0wpx599Tm6RbugaVbHwHw78kpuCT5dD8UXa4zHNlX9pM12e0B3SKSRqqni6Orhgt7UKjUptvunCSHjLP8E3DM_IMc/s1600/Kalender-Wedding2013-e.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" title="April"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjumu35Q1_ZYKibFOJ_6LUx43An3yLc0zONfqLG7O2tWwVXbe5i3X0wpx599Tm6RbugaVbHwHw78kpuCT5dD8UXa4zHNlX9pM12e0B3SKSRqqni6Orhgt7UKjUptvunCSHjLP8E3DM_IMc/s200/Kalender-Wedding2013-e.jpg" width="141" /></a></li>
   <li><a class="lightbox" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw2MxHYCGVUz5E1xMIdB4L9tXCalDWmLg9HAwq743gX0G98icaDvOlX4pgwaQmjtMIET4A7fMXbuCDS3ghLiibMcVMosudmzfHHNxwyhq3KvGWHSVCqcg9EK9Vmk6jEhigkdLeLwPhuiU/s1600/Kalender-Wedding2013-f.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" title="May"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw2MxHYCGVUz5E1xMIdB4L9tXCalDWmLg9HAwq743gX0G98icaDvOlX4pgwaQmjtMIET4A7fMXbuCDS3ghLiibMcVMosudmzfHHNxwyhq3KvGWHSVCqcg9EK9Vmk6jEhigkdLeLwPhuiU/s200/Kalender-Wedding2013-f.jpg" width="141" /></a></li>
   <li><a class="lightbox" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYUshv4gderA2xeJv42MF_NDApuHErHi757sMJImRt1wSJsJykVQIsm_8lFrtY2AohEGlMTqSaGij8F20E5bdC5evUWG6a4gk-zdisOBJAPG1wWserj8DDUyeuFBoiDfOJlSnoWj4ZJwo/s1600/Kalender-Wedding2013-g.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" title="June"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYUshv4gderA2xeJv42MF_NDApuHErHi757sMJImRt1wSJsJykVQIsm_8lFrtY2AohEGlMTqSaGij8F20E5bdC5evUWG6a4gk-zdisOBJAPG1wWserj8DDUyeuFBoiDfOJlSnoWj4ZJwo/s200/Kalender-Wedding2013-g.jpg" width="141" /></a></li>
   <li><a class="lightbox" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzMJv1HxKY0rgNvh2F0Q74Sg4dJkfPTDGBmAmCpFnB8Wivnw03mpubbMWCoweeUSsZcNkbRgQKp4EJmwbDKrLUvGiqpIwU-tpvROqHsALypiHNfa2c4IvMTRB7AX96AhuFhQ9By0cRf-4/s1600/Kalender-Wedding2013-h.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" title="July"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzMJv1HxKY0rgNvh2F0Q74Sg4dJkfPTDGBmAmCpFnB8Wivnw03mpubbMWCoweeUSsZcNkbRgQKp4EJmwbDKrLUvGiqpIwU-tpvROqHsALypiHNfa2c4IvMTRB7AX96AhuFhQ9By0cRf-4/s200/Kalender-Wedding2013-h.jpg" width="141" /></a></li>
   <li><a class="lightbox" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgD1hBWCYZrf_34X3uGushyYLrx0RNRquF0pQ4zwbDCsKmtwoBF5dTH65ja_hD1tttvPaVQ9IxJBtFAXf1hbo99oWBWM8_B1lq_FaUBAJq3O807J5y9sl_kHIdhHlIYULLkHcQmDA-S94/s1600/Kalender-Wedding2013-i.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" title="August"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgD1hBWCYZrf_34X3uGushyYLrx0RNRquF0pQ4zwbDCsKmtwoBF5dTH65ja_hD1tttvPaVQ9IxJBtFAXf1hbo99oWBWM8_B1lq_FaUBAJq3O807J5y9sl_kHIdhHlIYULLkHcQmDA-S94/s200/Kalender-Wedding2013-i.jpg" width="141" /></a></li>
   <li><a class="lightbox" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFGtlygiK46Oc0KSQT3f_-wHH0w_LeC3oPM586bpw-6tYqxXAszUSIpws1MtgdMbqyF7faY3iLRwWCFdrCaP2mV3BoDnh5dGcyEEB5gHd0wsqxlzPxv7xf53HuS89E2gswVVQ40XwGULs/s1600/Kalender-Wedding2013-j.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" title="September"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFGtlygiK46Oc0KSQT3f_-wHH0w_LeC3oPM586bpw-6tYqxXAszUSIpws1MtgdMbqyF7faY3iLRwWCFdrCaP2mV3BoDnh5dGcyEEB5gHd0wsqxlzPxv7xf53HuS89E2gswVVQ40XwGULs/s200/Kalender-Wedding2013-j.jpg" width="141" /></a></li>
   <li><a class="lightbox" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZb62XjcOHjjbjS8n2sbDQs5XnNw1vpEdmgKuprUObQRGmhUewObYZCLD2vRwUFgSzBuGhvYl2fq0UMS7A2XO-JgEFeo88QaMJeRaAo53wC7VjyJuNepVIPCheSpptzzmWm5FIjn9vZQ8/s1600/Kalender-Wedding2013-k.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" title="October"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZb62XjcOHjjbjS8n2sbDQs5XnNw1vpEdmgKuprUObQRGmhUewObYZCLD2vRwUFgSzBuGhvYl2fq0UMS7A2XO-JgEFeo88QaMJeRaAo53wC7VjyJuNepVIPCheSpptzzmWm5FIjn9vZQ8/s200/Kalender-Wedding2013-k.jpg" width="141" /></a></li>
   <li><a class="lightbox" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggaArOuwu_KrBhoJ_Vp6JBjxySUh6vgBNIVo_Jf16MJ-k-apy7BOqXWOSOMQuf_0kv0IFL9M6QhkUjwt2DS5MwoHE2ycH14jR7QJDtqZJXNeU82PxV3z6Hglgu2bQDYB9JLe7WGUsJt54/s1600/Kalender-Wedding2013-l.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" title="November"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggaArOuwu_KrBhoJ_Vp6JBjxySUh6vgBNIVo_Jf16MJ-k-apy7BOqXWOSOMQuf_0kv0IFL9M6QhkUjwt2DS5MwoHE2ycH14jR7QJDtqZJXNeU82PxV3z6Hglgu2bQDYB9JLe7WGUsJt54/s200/Kalender-Wedding2013-l.jpg" width="141" /></a></li>
   <li><a class="lightbox" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjd2yJsbEoIyaKKn4OCxg0OCU3eEH5pxbqs8Ugvt8OU8HEhs8esnp7Eh15UIUy7pDmFTLlAcD7JNa372zWN3YhrNMnSNuNVLC8o3GAeuEZBie-tyydvSrcRp-BTvm22i01_Gy8eN_17wE/s1600/Kalender-Wedding2013-m.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" title="Desember"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjd2yJsbEoIyaKKn4OCxg0OCU3eEH5pxbqs8Ugvt8OU8HEhs8esnp7Eh15UIUy7pDmFTLlAcD7JNa372zWN3YhrNMnSNuNVLC8o3GAeuEZBie-tyydvSrcRp-BTvm22i01_Gy8eN_17wE/s200/Kalender-Wedding2013-m.jpg" width="141" /></a></li>
  </ul>
  <div class="clearfix"></div>
  <a class="prev" href="#">&lt;</a>
  <a class="next" href="#">&gt;</a>
  <div class="pager" id="pager"></div>
 </div>
</div>

Put the above html script code to the post content of your blog in the html editor mode!

2. Create the Javascript Code using jquery Caroufredsel and initialize class and id css that used on the html script code above. Make sure the template already use jquery.min.js as library master of all jquery! the Javascript Code would be like this:

<script src='https://agratitudesign-template.googlecode.com/svn/branches/carouFredSel/jquery.carouFredSel-6.2.1-packed.js' type='text/javascript'/>
<script>
//<![CDATA[
$(function() {
 $('#carousel ul').carouFredSel({
  prev: { 
  button : "#carousel .prev",
  key : "left"
  },
  next: { 
  button : "#carousel .next",
  key : "right"
  },
  pagination: "#carousel .pager",
  scroll: 1000
 }); 
});
//]]>
</script>

Just Put the above Javascript code to the last head of the blog template !

3. Create the CSS Style Script for Image Items Slider Caroufredsel. The adjustment of the CSS Style Script is absolutely necessary because it is depending on the character of the blog template, the content size of your blog, and the pixel size of the image items. look at the first demo below!


The pixel size of the thumbnail image items has made ​​in the portrait orientation with height=200px and width=141px. This jquery image Slider Items Caroufredsel has made on the blog template by Artisteer, CSS Style script is like this:

#wrap-carousel {
border: 1px solid #c7d8ad;
width: 605px !important;
text-align: center;
}
#carousel {
text-align: center;
width: 605px;
height: 275px;
background-color: #e5f2d6;
overflow: hidden;
position: relative;
}
#carousel ul {
display: block;
margin: 0 0 0 25px;
padding: 0;
position: absolute;
}
#carousel li {
text-align: center;
display: block;
width: 165px;
height: 250px;
margin: 0;
float: left;
}
#carousel li img {
border: 1px solid rgb(204, 204, 204);
background-color: white;
box-shadow: none !important;
padding: 6px ;
display: block;
float: left;
margin: 0;
position: absolute;
}
#carousel li:before {
content: none !important;}
.clearfix {
float: none;
clear: both;
}
#carousel .prev, #carousel .next {
background: transparent url(https://agratitudesign-template.googlecode.com/svn/branches/carousel_control2.png) no-repeat 0 0;
text-indent: -999px;
display: block;
overflow: hidden;
width: 15px;
height: 21px;
margin-left: 5px;
position: absolute;
top: 115px;
}
#carousel .prev {
background-position: 0 0;
left: 0px;
}
#carousel .prev:hover {
left: 0px;
}
#carousel .next {
background-position: -18px 0;
right: 2px;
}
#carousel .next:hover {
right: 2px;
}
#carousel .pager {
text-align: center;
top: 230px; 
position: relative;
}
#carousel .pager a {
background: transparent url(https://agratitudesign-template.googlecode.com/svn/branches/carousel_control2.png) no-repeat -2px -32px;
text-decoration: none;
text-indent: -999px;
display: inline-block;
overflow: hidden;
width: 8px;
height: 8px;
margin: 0 5px 0 0;
}
#carousel .pager a.selected {
background: transparent url(https://agratitudesign-template.googlecode.com/svn/branches/carousel_control2.png) no-repeat -12px -32px;
text-decoration: underline;
}

Put the above CSS Style script as the additional css to the last of the skin of your blog template !

The blog content of the template blog by Artisteer, the CSS Style on the content much inherits predefined, if you compared to the standard template blog by blog. For example, to disappear from the image list bullet style, should be done this way!

#carousel li:before {
content: none !important;}

The size of the thumbnail image items in landscape orientation was made ​​with height=133px and width=150. The Jquery Image Slider Items Caroufredsel was created still on template blog by Artisteer. The width, height, padding, margin of the position of the image item must be adjusted. CSS Style Script as follows:

#wrap-carousel {
border: 1px solid #c7d8ad;
width: 605px !important;
text-align: center;
}
#carousel {
text-align: center;
width: 605px;
height: 186px;
background-color: #e5f2d6;
overflow: hidden;
position: relative;
}
#carousel ul {
display: block;
margin: 0 0 0 20px;
padding: 0;
position: absolute;
}
#carousel li {
text-align: center;
display: block;
width: 165px;
height: 186px;
margin: 0;
float: left;
}
#carousel li img {
border: 1px solid rgb(204, 204, 204);
background-color: white;
box-shadow: none !important;
padding: 6px ;
display: block;
float: left;
margin: 0;
position: absolute;
} 
#carousel li:before {
content: none !important;
}
.clearfix {
float: none;
clear: both;
}
#carousel .prev, #carousel .next {
background: transparent url(https://agratitudesign-template.googlecode.com/svn/branches/carousel_control2.png) no-repeat 0 0;
text-indent: -999px;
display: block;
overflow: hidden;
width: 15px;
height: 21px;
margin-left: 5px;
position: absolute;
top: 70px;
}
#carousel .prev {
background-position: 0 0;
left: 0px;
}
#carousel .prev:hover {
left: 0px;
}
#carousel .next {
background-position: -18px 0;
right: 2px;
}
#carousel .next:hover {
right: 2px;
}
#carousel .pager {
text-align: center;
top: 140px; 
position: relative;
}
#carousel .pager a {
background: transparent url(https://agratitudesign-template.googlecode.com/svn/branches/carousel_control2.png) no-repeat -2px -32px;
text-decoration: none;
text-indent: -999px;
display: inline-block;
overflow: hidden;
width: 8px;
height: 8px;
margin: 0 5px 0 0;
}
#carousel .pager a.selected {
background: transparent url(https://agratitudesign-template.googlecode.com/svn/branches/carousel_control2.png) no-repeat -12px -32px;
text-decoration: underline;
}

As a comparison, for another example is implementation to the blog content, that the template by standard blogger, with the portrait orientation for image items slider as demo 1 on the standard blogger). Let's see the picture below!



CSS Style Script as follows:

#wrap-carousel {
width: 570px !important;
}
#carousel {
width: 570px;
height: 275px;
background-color: #e5f2d6;
overflow: hidden;
position: relative;
}
#carousel ul {
list-style: none;
display: block;
margin: 0 17px;
padding: 0 10px;
position: absolute;
}
#carousel li {
text-align: center;
display: block;
width: 165px;
height: 250px;
margin: 5px;
float: left;
}
#carousel li img {
border: 1px solid rgb(204, 204, 204);
background-color: white;
box-shadow: none !important;
padding: 6px ;
display: block;
float: left;
margin: 0;
position: absolute;
} 
.clearfix {
float: none;
clear: both;
}
#carousel .prev, #carousel .next {
background: transparent url(https://agratitudesign-template.googlecode.com/svn/branches/carousel_control2.png) no-repeat 0 0;
text-indent: -999px;
display: block;
overflow: hidden;
width: 15px;
height: 21px;
margin-left: 5px;
position: absolute;
top: 120px;
}
#carousel .prev {
background-position: 0 0;
left: 0px;
}
#carousel .prev:hover {
left: 0px;
}
#carousel .next {
background-position: -18px 0;
right: 2px;
}
#carousel .next:hover {
right: 2px;
}
#carousel .pager {
text-align: center;
top: 230px; 
position: relative;
}
#carousel .pager a {
background: transparent url(https://agratitudesign-template.googlecode.com/svn/branches/carousel_control2.png) no-repeat -2px -32px;
text-decoration: none;
text-indent: -999px;
display: inline-block;
overflow: hidden;
width: 8px;
height: 8px;
margin: 0 5px 0 0;
}
#carousel .pager a.selected {
background: transparent url(https://agratitudesign-template.googlecode.com/svn/branches/carousel_control2.png) no-repeat -12px -32px;
text-decoration: underline;
}

Has noted here is how to remove the bullet style of the images list by inserting list-style: none; to the css id #carousel ul without requiring additional css id #carousel li: before (only for Artisteer template)

If you are still confused how to insert HTML, Javascript, and CSS scripts for the jquery Image Slider Items Caroufredsel, Let's see the article video above!