March 20, 2014

Weebly Tricks #40 - Tiny Circle Slider

Posted by Domingo Tambasacan at 3/20/2014

Tiny Circle Slider for Weebly



Here is a unique type of slider that lets you browse photos inside a circle. However, I can only discuss the simplest type from the author's samples. Please check all his works from the script source found at the demo page. As usual, the code has been modified to make it fitted to your Weebly template. Changes includes an additional div container to provide spacing outside the slider.







1. The following code is the JQuery plus the CSS which you will be inserting into your site's <head>. (quick <head> tips here)

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'/></script>
 <script src="http://helplogger.googlecode.com/svn/trunk/jquery.tinycircleslider.min.js"/>
   </script>
  <script type="text/javascript">
$(document).ready(function()
{
$('#rotatescroll').tinycircleslider({ interval: true, dotsSnap: true });
});
</script>
<style>

  #rotatescroll { /* is the rectangle container */
    height: 300px;
    position: relative;
    width: 300px;
 
  }
  #rotatescroll .viewport { /* is the rectangle containing the images */
    height: 300px;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    width: 300px;
    margin-top: 10px;
    margin-bottom: 10px;
 
  }
  #rotatescroll .overview { /* is the list with the images */
    left: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
 
  }
  #rotatescroll .overview li { /* each item of the list */
    float: left;
    height: 300px;
    position: relative;
    width:320px;
  }
  #rotatescroll .overlay { /* the image with the circle overlapping the list */
    background: transparent url(http://4.bp.blogspot.com/-Ot8KEdqWA58/Um59McoG1bI/AAAAAAAAEgY/ZzK7Qidizrg/s1600/bg-rotatescroll.png) no-repeat 0 0;
    height: 300px;
    left: 0;
    position: absolute;
    top: 0;
    width:300px;
 
  }
  #rotatescroll .thumb { /* the red circle that allows us to navigate */
    background:transparent url(http://1.bp.blogspot.com/-SY8PG9E-_ZQ/Um59McKv1vI/AAAAAAAAEgc/tEDJm6soGfE/s1600/bg-thumb.png) no-repeat 0 0;
    cursor: pointer;
    height: 26px;
    left: 137px;
    position: absolute;
    top: -3px;
    width: 26px;
    z-index: 200;
 
  }
  #rotatescroll .dot { /* the points indicating the position of each image */
    background: transparent url(http://3.bp.blogspot.com/-O0kN8rvZGSE/Um59MRdOpHI/AAAAAAAAEgQ/XCiipR_fCKM/s1600/bg-dot.png) no-repeat 0 0;
    display: none;
    height: 12px;
    left: 155px;
    position: absolute;
    top: 3px;
    width: 12px;
    z-index: 100;
 
  }
  #rotatescroll .dot span { /* are hidden by default */
    display: none;
  }
#outer {
  margin: 3px;
}
</style>

The green highlighted text are descriptions for each short tags. The red one was increased to 320px giving a 20px for image spaces. Best to use photos with 300 x 300 dimension having focus on the middle point.

2. Now go to the page you want to insert this slider, drag one embed code and paste the following:

<div id="outer">
<div id="rotatescroll">
  <div class="viewport">
    <ul class="overview">
      <li><img src="IMAGE SOURCE LINK" /></li>
      <li><img src="IMAGE SOURCE LINK" /></li>
      <li><img src="IMAGE SOURCE LINK" /></li>
      <li><img src="IMAGE SOURCE LINK" /></li>
      <li><img src="IMAGE SOURCE LINK" /></li>
      <li><img src="IMAGE SOURCE LINK" /></li>
      <li><img src="IMAGE SOURCE LINK" /></li>
    </ul>
  </div>
  <div class="dot"></div>
  <div class="overlay"></div>
  <div class="thumb"></div>
</div>
</div>


You can now specify your photo source by changing the IMAGE SOURCE LINK. You can add more photos by inserting one complete line as highlighted in green color.

Thats it! If you like it please visit the script source and like us on Facebook to keep us motivated.

Get email updates and more access! (Free)
Email *
email marketing by activecampaign

About Author:

Hi I am Domz. I love inserting new widgets and effects on Weebly Template. I like helping people and I like them more being my subscriber. Follow me @ Twitter | Facebook



If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!

...

0 comments:

Have any question? Feel Free To Post Below:

 

© 2014. All Rights Reserved | My Weebly Tricks | Template by Blogger Widgets

Home | | Privacy Policy | Top