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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrvlfAyVt1bHkg_h1q3ZTfcArLz_ip6MPds6CEGbYzr-9QRi2_8ALnvkeZv625qr2GvWy9ZiZ_doF7tPtVaub88K7BIDr19PMdAcBlc_3PjRWbKqEcB35K467SGLHRsKuuWevmJcldJa44/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKhtZv5lJvnh4bEDm9zW29qnhW9gwSGdDR_phjjtn8ctk78wYLG9v59HQdPPMPnYjNu8ns8XWJrFMrIW05T51ogOdd5jcUc2GxCsEog8b_gbXeAQvW92X_oLWlZJMelyTrilQoz3AeoMRI/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS8ihRTUtZPYz4SeoskbY2nXO_oLO2p2Lfs9mayiUTM4R4adjNi5ypRiEEAmNJDavtm4GxLqfsKtcS_M44-dSm8N94mCWa8ZsFPQkjgBCXGxTU4w_a9YhKGTfLxXaSGGDMeAz3B72OCj-G/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>
<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrvlfAyVt1bHkg_h1q3ZTfcArLz_ip6MPds6CEGbYzr-9QRi2_8ALnvkeZv625qr2GvWy9ZiZ_doF7tPtVaub88K7BIDr19PMdAcBlc_3PjRWbKqEcB35K467SGLHRsKuuWevmJcldJa44/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKhtZv5lJvnh4bEDm9zW29qnhW9gwSGdDR_phjjtn8ctk78wYLG9v59HQdPPMPnYjNu8ns8XWJrFMrIW05T51ogOdd5jcUc2GxCsEog8b_gbXeAQvW92X_oLWlZJMelyTrilQoz3AeoMRI/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS8ihRTUtZPYz4SeoskbY2nXO_oLO2p2Lfs9mayiUTM4R4adjNi5ypRiEEAmNJDavtm4GxLqfsKtcS_M44-dSm8N94mCWa8ZsFPQkjgBCXGxTU4w_a9YhKGTfLxXaSGGDMeAz3B72OCj-G/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>
<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.
0 comments: