Showing posts with label jQuery Slider. Show all posts
Showing posts with label jQuery Slider. Show all posts

Tuesday, August 26, 2014

jQuery Image Slider(wow slider) with Thumbnails for Blogspot

Posted on 3:10 AM by Unknown


Here I came up with another awesome image slider for blogspot. This is a 'jQuery Image Slider with Thumbnails' created by WOWSlider. I did a little customization for making it blogger friendly with due respect to wowslider. See demo below.



Lets Step forward to adding this jQuery Image Slider with Thumbnails for Blogspot

1. Go to Blogger Dashboard > Layout > Add a Gadget
2. Select HTML/Javascript
3. Copy the code below and paste on it. 

<style type="text/css">
.slider-box {
    background: none repeat scroll 0 0 #FAFAFA;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 0 3px #333333;
    margin: 0 auto;
    width: 675px;
 overflow: hidden;
}
#slider-wrapper {
    margin: 0 auto;
    padding: 10px;
}
#jslider-container {
    border: 2px solid #FFFFFF;
    max-width: 550px;
    position: relative;
    text-align: left;
    z-index: 90;
}
</style>
<link href="http://project.dimpost.com/image-slider/wowslider/css/wow-slider.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<div class="slider-box">
<div id="slider-wrapper">
<div id="jslider-container">
 <div class="jslider_images">
      <ul>
  <li><a href="http://dimpost.com">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCdJYo2dn0RMWBQ8x7op6CdUXcmT3UUfCPrzdt7rB4Koweo9YBRBejywCZdKmNfdAPcQFooDmHVV1uNCjM7g0jqIPIOidvmHBR9-PpB_CSHhImCzn-KR68hugGiKdUO8HRipqDY8dRDWnd/s550/sample1.jpg" title="Sunset"/>
  </a>A boat with beautiful sunset.</li>
  <li><a href="#">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2QNX1Cj0Jn-4Lm5BliE7FPRhvCB2tnRqYMPcL2VjcZnZSfWSxyISosJa0GVJCTL8bQrqwGQKsZG1uEPKJk5Z-ZZcrchXImUQwKu0SaIn4MjT21dcJ34Z5RI93k8WrTiEncuijS2TP_zOZ/s550/sample2.jpg" title="Rainbow"/>
  </a></li>
  <li><a href="#">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyosYDuQTOJiClG1NBMbK15pH0An_E092FfYTXnPLVqEXQiGBWppQUD_kr-PcwsnPQARXhJ63dnjLJws1B-0AF2rfmCDbvbabS6KSCtU7FehKCpm4QUGGWYibVYSjZXL3N_EaKT5wigwIT/s550/sample3.jpg" title="True Nature"/>
  </a>Tree in field with blue sky.</li>
  <li><a href="#">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd0552hUU6GW9nNsAwnzTFBgwAwWGg5W-eSMu_oBHSwIohGk6i9czWR2rz5N6qOaPc48JKyeX7ueYxbO037txcq7fCkZggBnPp6BzcZtHJn0jdQ52vAVRe-vrcQpnzo2gKOyklIDhpp6D8/s550/sample4.jpg" title="Sunrise""/>
  </a>Amaizing sunrise moment</li>
  <li><a href="#">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYlIqWR4ufWUEhgD7wZyWQlWphnQ1TVGEilv_uhcZeoNJ8Xfm8EA20283i5PvXqV4drnSZxPeNfNuL9-5PrcbYTAWY-GlxGNr6F_amsLgXJmETJZwNqdBvgyWl9Wu_WUd0n_RPluKzPILO/s550/sample5.jpg" title="CAR in HDR Nature"/>
  </a></li>
  <li><a href="#">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWWQy25HeAvcLHTPqq19DNqra3l5npDAsVY7MsFveEbXDYGHaekbDg32UvHzLVrySD7tGMbjyd5T7YeSSH2zK2ZRJFTcdXKZGUuwxCZRI-trcI11J9C78j5qfAMHWDK4Rhzr-OyPEiLfsE/s550/sample6.jpg" title="Sunshine"/>
  </a></li>
   </ul>
    </div> 
    
 <div class="jslider_thumbs">
        <div>
  <a href="#" title="Sunset"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQefdcxdWd8sSa2x6eUVw8ssbQjOTi2n5G_hobgYbi5K6zAgt96ULxgmzpXMu8yYni8pQce8RT0jvJl9tuNlAIyiRgeP4u2kJX81o3oM7t1K3VAdtXp21cHquBGV7isegrw06PQ7j3Lu8R/s85/sample1.jpg"/></a>
  <a href="#" title="Rainbow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-t5em6tjFPZGEq3HOBJTw3BRaapkkLipoYh9fS2P6qu5to1RqXLqmYRtGQG1flIWbdRS2jHJkrKurhjTiA5nq9jAkkj9BPpQ6LQuKY6ZwIVOT34m7PTiQ-JppTC_1t8VD_zMf6rdqWSJx/s85/sample2.jpg"/></a>
  <a href="#" title="True Nature"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtCJRAZXiYwfa3-bf_n2wwrRbWUJfNa_oUzZsOGd3Ypq9Tz-L3p0n88aLYH5ppR3zUwvX9qB8_3zoF1LawKfDBAzdj_wt3Oof8pKAPdXYTSeVIrQ7PMwYwZSOJ3KMCCZgKJ6xR0Ifqd6dE/s85/sample3.jpg"/></a>
  <a href="#" title="Sunrise"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOIlXpKTAinRAVK9aw7qF_Fq1xn0mGm6xWGnHjsKz7AWvbBqLjDQQg4rLT3LxGyFgaTgWOy9O5Ek_wBtdcxQ1AmyII0dgZqJYv7pqTEg7wqAnGv8EKC9ZCmtRthlDJBEHgToRCpNnfNOys/s85/sample4.jpg"/></a>
  <a href="#" title="CAR in HDR Nature"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfajIWtZb0gYt-Gob-AgYdbI_eu-RFApeBe87TeMNPDMRx619mgIbBUzzxTzUjkykQTgrC2Qr4VRjJzbnGqVOuw9X5WzTC3ip7hv3AfiucKIPPDodYiuDk48cgdJdyuDD5mayIYkJ_pITw/s85/sample5.jpg"/></a>
  <a href="#" title="Sunshine"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM-9lwmBaTCToDESCob9e6myi8jauXq5m3udOiIL6hpCQ6FpynazazpCgb-5__y7hEUPVdO6CeOXmkqnDXrVxaqfZBTTK-xh9DgluejoNq4bvGagJ3XCRjdkzNqOBxUzdLDUI0aIiuOBto/s85/sample6.jpg"/></a>
        </div>
 </div>
    
</div>
</div>
</div>
<script type="text/javascript" src="http://dimpost.googlecode.com/files/wow-slider.js"></script>
4. Save, and were done.
Have fun! Don't forget to say thanks :)

jQuery Carousel Slider for Blogger (FlexSlider)

Posted on 3:04 AM by Unknown
blogger carousel
This is a responsive jQuery carousel slider. This amazing slider developed by flexslider.woothemes.com. It has some really cool features that makes you like it. The most cool feature is it is fully responsive; you don't have to tensed about the sliders width / height even all images width and height are auto adjustable. And also you can set minimum/maximum number of images to be appear on occasion of various size screen/browser. So overall it is quite a beautiful carousel slider. Here it is customized for blogger/blogspot so you can just copy and paste the code to install on your blogger blog. Check out the live demo by clicking the link below.


Let’s Install the jQuery Carousel Slider to your Blogger Blog

  1. Go to Blogger Dashboard > Layout > Add a Gadget
  2. Select HTML/Javascript
  3. Copy the code below and paste on it.


<style type="text/css">
/*
* jQuery FlexSlider v2.0
* http://www.woothemes.com/flexslider/
*
* Copyright 2012 WooThemes
* Free to use under the GPLv2 license.
* http://www.gnu.org/licenses/gpl-2.0.html
*
* Contributing author: Tyler Smith (@mbmufffin)
*/
/* Browser Resets */
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus{
outline:none;
}
.slides,
.flex-control-nav,
.flex-direction-nav{
margin:0;
padding:0;
list-style:none;
}
/* FlexSlider Necessary Styles
*********************************/
.flexslider{
margin:0;
padding:0;
}
.flexslider .slides > li{
display:none;
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
-o-backface-visibility:hidden;
backface-visibility:hidden;
}
/* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img{
width:100%;
display:block;
}
.flex-pauseplay span{
text-transform:capitalize;
}
/* Clearfix for the .slides element */
.flexslider a.intro {
bottom:0;
color:rgba(0, 0, 0, 0.1);
font-size:14px;
position:absolute;
right:0;
text-decoration:none;
z-index:99999;
}
.slides:after{
content:".";
display:block;
clear:both;
visibility:hidden;
line-height:0;
height:0;
}
html[xmlns] .slides{
display:block;
}
* html .slides{
height:1%;
}
/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
* include js that eliminates this class on page load */
.no-js .slides > li:first-child{
display:block;
}
/* FlexSlider Default Theme
*********************************/
.flexslider{
margin:0 0 60px;
background:#fff;
border:4px solid #fff;
position:relative;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
-webkit-box-shadow:0 1px 4px rgba(0,0,0,.2);
-moz-box-shadow:0 1px 4px rgba(0,0,0,.2);
box-shadow:0 1px 4px rgba(0,0,0,.2);
zoom:1;
}
.flex-viewport{
max-height:2000px;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-o-transition:all 1s ease;
transition:all 1s ease;
}
.loading .flex-viewport{
max-height:300px;
}
.flexslider .slides{
zoom:1;
}
.carousel li{
margin-right:5px;
}
/* Direction Nav */
.flexslider li {
border: 0 none !important;
padding: 0 !important;
text-indent: 0 !important;
}
.flex-direction-nav a{
width:30px;
height:30px;
margin:-20px 0 0;
display:block;
background:url(http://project.dimpost.com/flexslider-carousel/images/bg_direction_nav.png) no-repeat 0 0;
position:absolute;
top:50%;
cursor:pointer;
text-indent:-9999px;
opacity:0;
-webkit-transition:all .3s ease;
-moz-transition:all .3s ease;
-o-transition:all .3s ease;
transition:all .3s ease;
}
.flex-direction-nav .flex-next{
background-position:100% 0;
right:-36px;
}
.flex-direction-nav .flex-prev{
left:-36px;
}
.flexslider:hover .flex-next{
opacity:0.8;
right:5px;
}
.flexslider:hover .flex-prev{
opacity:0.8;
left:5px;
}
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover{
opacity:1;
}
.flex-direction-nav .disabled{
opacity:.3!important;
filter:alpha(opacity=30);
cursor:default;
}
/* Control Nav */
.flex-control-nav{
width:100%;
position:absolute;
bottom:-40px;
text-align:center;
}
.flex-control-nav li{
margin:0 6px;
display:inline-block;
zoom:1;
*display:inline;
}
.flex-control-paging li a{
width:11px;
height:11px;
display:block;
background:#666;
background:rgba(0,0,0,0.5);
cursor:pointer;
text-indent:-9999px;
-webkit-border-radius:20px;
-moz-border-radius:20px;
border-radius:20px;
-webkit-box-shadow:inset 0 0 3px rgba(0,0,0,0.3);
-moz-box-shadow:inset 0 0 3px rgba(0,0,0,0.3);
box-shadow:inset 0 0 3px rgba(0,0,0,0.3);
}
.flex-control-paging li a:hover{
background:#333;
background:rgba(0,0,0,0.7);
}
.flex-control-paging li a.flex-active{
background:#000;
background:rgba(0,0,0,0.9);
cursor:default;
}
.flex-control-thumbs{
margin:5px 0 0;
position:static;
overflow:hidden;
}
.flex-control-thumbs li{
width:25%;
float:left;
margin:0;
}
.flex-control-thumbs img{
width:100%;
display:block;
opacity:.7;
cursor:pointer;
}
.flex-control-thumbs img:hover{
opacity:1;
}
.flex-control-thumbs .active{
opacity:1;
cursor:default;
}
</style>
<script type="text/javascript" src="http://project.dimpost.com/flexslider-carousel/jquery.js"></script>
<script type="text/javascript" src="http://project.dimpost.com/flexslider-carousel/jquery.flexslider-min.js"></script>
<script type="text/javascript">
 $(document).ready(function(){   
$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide",
    animationLoop: false,
    itemWidth: 210,
    itemMargin: 0,
    minItems: 1,
    maxItems: 4
  });
});
});
</script>
<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="http://project.dimpost.com/flexslider-carousel/images/slide1.jpg" />
    </li>
    <li>
      <img src="http://project.dimpost.com/flexslider-carousel/images/slide2.jpg" />
    </li>
    <li>
      <img src="http://project.dimpost.com/flexslider-carousel/images/slide3.jpg" />
    </li>
    <li>
      <img src="http://project.dimpost.com/flexslider-carousel/images/slide4.jpg" />
    </li>
    <li>
      <img src="http://project.dimpost.com/flexslider-carousel/images/slide2.jpg" />
    </li>
    <li>
      <img src="http://project.dimpost.com/flexslider-carousel/images/slide1.jpg" />
    </li>
    <li>
      <img src="http://project.dimpost.com/flexslider-carousel/images/slide4.jpg" />
    </li>
    <li>
      <img src="http://project.dimpost.com/flexslider-carousel/images/slide3.jpg" />
    </li>
    <li>
      <img src="http://project.dimpost.com/flexslider-carousel/images/slide1.jpg" />
    </li>
    <li>
      <img src="http://project.dimpost.com/flexslider-carousel/images/slide4.jpg" />
    </li>
    <li>
      <img src="http://project.dimpost.com/flexslider-carousel/images/slide3.jpg" />
    </li>
    <li>
      <img src="http://project.dimpost.com/flexslider-carousel/images/slide2.jpg" />
    </li>
  </ul>
</div>

   4. Save, and were done.
NOTE: 
  • Forget about width and height it will adjust auto.
  • Replace the pink colored image URL with your own uploaded image URL(You can upload image on blogspot, flickr etc.) 
  • There is some other things you can change, see below. I guess I don't have to explain that because they are named like as they are.
    animationLoop: false,
    itemWidth: 210,
    itemMargin: 0,
    minItems: 1,
    maxItems: 4
Have fun! Don't forget to say thanks :)
Subscribe to: Posts (Atom)