If you love slider and you also love accordion, then why not put them together? Introducing: "Slidorion", where slider and accordion entertains you both. Thanks to Ben Holland for this slider. Just an overview, your photos will be shown on the left side while simultaneously being describe on the right side. Check the demo for more.
1. First of all you will have to download three items which is listed below. To download, right click each and choose "save link as".
jquery.easing.js
jquery.slidorion.min.js
slidorion.css
2. Now upload those files into your template by going to Design > Edit HTML/ CSS > Add new files and choose all the three. Save your template.
3. Paste the following codes into your site's <head>. (Please read how to edit <head> here)
<link rel="stylesheet" type="text/css" href="http://myweeblytricksdemo.weebly.com/files/theme/slidorion.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://myweeblytricksdemo.weebly.com/files/theme/jquery.easing.js"></script>
<script src="http://myweeblytricksdemo.weebly.com/files/theme/jquery.slidorion.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#slidorion').slidorion({
speed: 1000,
interval: 4000,
effect: 'slideLeft'
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://myweeblytricksdemo.weebly.com/files/theme/jquery.easing.js"></script>
<script src="http://myweeblytricksdemo.weebly.com/files/theme/jquery.slidorion.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#slidorion').slidorion({
speed: 1000,
interval: 4000,
effect: 'slideLeft'
});
});
</script>
You need to change all the red marked text with your own website address. You may want to adjust the transition speed, duration of each presentation and the transition effects. For more effects you can visit the script source found at the demo page. Done with this, save your work.
4. Proceed to the page you want and paste the following HTML codes:
<div id="slidorion" class="slidorion">
<div class="slider">
<div class="slide"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC4J18PjVDIuAaUWwbiYORdjd84PVRYAqCvMYV2P7PF-gF2zGEqQjyuVXBuYYGMAd8AvrO4IsBl468rfU-AE2xaCI_uf2wskqnWPbYy1DplDJRVmHi9C_ZWTr_dsR_8tdKE58Qy34VUpGL/s1600/Music+Album+Hover+Effects+++MY+WEEBLY+TRICKS.jpeg" /></div>
<div class="slide"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBO-3CtGZlxRgkZBOn_CyuN73lbKDldrA9hAK7l9L3MuPMsofec4Fr77upiOrL_0qNlOPiQ-3FFW9FN8O_87gY4kyXkV3vooXOlQhVydHnum8IxLBPWE8zmIYwmR1szcMSrRYOoU13gnu7/s1600/BluePrint+Subscription+Widget+++MY+WEEBLY+TRICKS.jpeg" /></div>
<div class="slide"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM1dZLO_rev25rpWSHsR1eDRBvdIRVGHKSF9DIOdZhh2fGy0J-nmQgSVKicbtr5YgAX3lJlFK9f32VGVKHX8zGWj3IEE-GV3Teg_OxmN_s1UqSGxr973PcAedLANNTCVVgbc1a8akEQMmq/s1600/Tiny+Circle+Slider+++MY+WEEBLY+TRICKS.jpeg" /></div>
</div>
<div class="accordion">
<div class="header">Music Album Hover Effects</div>
<div class="content">This unique hover effect made with CSS3 can be used for websites offering music contents. If you are promoting your albums online then you should try this one. The effect is impressive with a vinyl record sliding from the disk case on mouseover.<a href='http://www.myweeblytricks.com/2014/03/weebly-tricks-41-jquery-round-clock.html'> Install Now!</a>
</div>
<div class="header">BluePrint Subscription Widget</div>
<div class="content">Here is the second subscription box after the Mashable Widget from MBT, well thanks to Bloggeryard for their thoughtful creativity.<a href='http://www.myweeblytricks.com/2014/03/weebly-tricks-42-blueprint-subscription.html'> Install Now!</a></div>
<div class="header">Tiny Circle Slider</div>
<div class="content">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.<a href='http://www.myweeblytricks.com/2014/03/weebly-tricks-40-tiny-circle-slider.html'> Install Now!</a></div>
</div>
</div>
<div class="slider">
<div class="slide"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC4J18PjVDIuAaUWwbiYORdjd84PVRYAqCvMYV2P7PF-gF2zGEqQjyuVXBuYYGMAd8AvrO4IsBl468rfU-AE2xaCI_uf2wskqnWPbYy1DplDJRVmHi9C_ZWTr_dsR_8tdKE58Qy34VUpGL/s1600/Music+Album+Hover+Effects+++MY+WEEBLY+TRICKS.jpeg" /></div>
<div class="slide"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBO-3CtGZlxRgkZBOn_CyuN73lbKDldrA9hAK7l9L3MuPMsofec4Fr77upiOrL_0qNlOPiQ-3FFW9FN8O_87gY4kyXkV3vooXOlQhVydHnum8IxLBPWE8zmIYwmR1szcMSrRYOoU13gnu7/s1600/BluePrint+Subscription+Widget+++MY+WEEBLY+TRICKS.jpeg" /></div>
<div class="slide"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM1dZLO_rev25rpWSHsR1eDRBvdIRVGHKSF9DIOdZhh2fGy0J-nmQgSVKicbtr5YgAX3lJlFK9f32VGVKHX8zGWj3IEE-GV3Teg_OxmN_s1UqSGxr973PcAedLANNTCVVgbc1a8akEQMmq/s1600/Tiny+Circle+Slider+++MY+WEEBLY+TRICKS.jpeg" /></div>
</div>
<div class="accordion">
<div class="header">Music Album Hover Effects</div>
<div class="content">This unique hover effect made with CSS3 can be used for websites offering music contents. If you are promoting your albums online then you should try this one. The effect is impressive with a vinyl record sliding from the disk case on mouseover.<a href='http://www.myweeblytricks.com/2014/03/weebly-tricks-41-jquery-round-clock.html'> Install Now!</a>
</div>
<div class="header">BluePrint Subscription Widget</div>
<div class="content">Here is the second subscription box after the Mashable Widget from MBT, well thanks to Bloggeryard for their thoughtful creativity.<a href='http://www.myweeblytricks.com/2014/03/weebly-tricks-42-blueprint-subscription.html'> Install Now!</a></div>
<div class="header">Tiny Circle Slider</div>
<div class="content">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.<a href='http://www.myweeblytricks.com/2014/03/weebly-tricks-40-tiny-circle-slider.html'> Install Now!</a></div>
</div>
</div>
The HTML is divided into two parts which is the slider and the accordion. Ok, here are the details:
Red marked text will be the image source link. (three of them)
Green will be the accordion title that should correspond to the image shown.
Blue one will be your description.
Remember to use photos with same sizes. On the demo I used 300x300 plus the accordion with 200px, overall the slidorion has a dimension of 500x300. If you want to use other sizes please let me know. All credits goes to the script author please visit his homepage with the details on the demo page.
Thank You!!
0 comments: