Ok, for those of you blogger fans, on this time I will give you my notes on the applying of jquery cycle and easing to make an Album Image Slider on your blog. Image slider that I have made using with scroll horizontal for the images. Album Image slider it looks good we apply to the content post on your blog that much images or image gallery. You can combine it with the image sexy lightbox evolution to the images that will scroll horizontally. I have been applied on the post that titled as The Soul of Balinese Carvings at the last pictures!
In order to make an Album using Image Slider we are going to add any two links of jquery and define jquery function slider using class or id css that related with the images list that will given the image slider effect. The Album of image slider actually just display the image from images list that that will display horizontal scroll animation one by one. Ok we shall practice in the content that uses gallery images. If you are not sure or not confidence to apply something new on the template script, backup your template code at first.
1. Go to your blogger dashboard, click on Template>Edit HTML. On the script code of your template, your template must be used jquery.min.js link on the head section. Inside the script templates, press Ctrl+F on your keyboard, and type just "min.js". Add jquery.cycle.all.js and jquery.easing.js together with function plugin for image slider, just put below of jquery.min.js link, Let's See the picture below!
Script Code is added as follows:
<script src='http://agratitudesign-template.googlecode.com/svn/trunk/jquery.cycle.all.js' type='text/javascript'/> <script src='http://agratitudesign-template.googlecode.com/svn/trunk/jquery.easing.1.3.js' type='text/javascript'/>
And define the function animation slider, #art-slide is the css id that used in the image style list that we will make.
<script type='text/javascript'>
$(document).ready(function(){
$('#art-slide').cycle({
fx: 'scrollLeft',
easing: 'easeOutBack',
delay: -4000
});
});
</script>
All Script that mentioned above placed into the head of the template, as shown like the right picture above, you can parse the function plugin code at first. But a long as my experience, the template blog will directly parse the function code that we added automatically.
2. Defining the css id that we used in the function code in this case i use #art-slide. Find the place for its location, I was just placed at the end of the skin template. Ctrl+F on the script of your templates and type ]]></b:skin>.
I define it as follows:
#art-slide {
width: 66%;
height: 300px;
left : 0px;
margin: 0 auto;
overflow:hidden;
}
#art-slide img {
padding: 15px;
border: 1px solid rgb(204, 204, 204);
background-color: rgb(238, 238, 238);
}
#art-slide li:before {
content: none !important;
}
Description :
- width: 66% : determine the width of the slider movement on the post content blog
- height: 300px : slightly larger than the image that will be used as a border to make beautify of the image slider
- overflow: hidden : in order not to fall apart during the loading process
- # art-slide li: before : to eliminate the bullet list style, define it according to the character your template. May be like this # art-slide ul{list-style:none !important;} depending on how you defined your bullet style on your template.
3. If you are using such a image sexy lightbox evolution in the post content images on your blog, just grab the code on the <a>...</a>, collect the images code that you have, adjust the size image that you, and something another not required then put inside <ul> and <li> tag. So that the code that will inserted to the content post will be like this:
<ul id="art-slide"> <li><a class="lightbox" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCK2rm_2eYwUCxK3GQVs__ToZ7LG7TIz6ovpzsdboYtPsECzpNOfG4ej_696jh31k11x7r7giz-D65Ykr9zYqCzpHltHkCv5JSA-63WXjzWZexKx6GY8x5eTkORqTzlqd72SjjeRu312Y/s1600/Balinese+Frame-1.jpg" imageanchor="1" title="Balinese Motif Carving as Frame-Download 1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCK2rm_2eYwUCxK3GQVs__ToZ7LG7TIz6ovpzsdboYtPsECzpNOfG4ej_696jh31k11x7r7giz-D65Ykr9zYqCzpHltHkCv5JSA-63WXjzWZexKx6GY8x5eTkORqTzlqd72SjjeRu312Y/s320/Balinese+Frame-1.jpg" /></a></li> <li><a class="lightbox" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjBEvEjGkDVfIkR5yzbbQLlkcBAgENln-U-AHyFwrrI41ZoCiErdRoBIqWue1g9C4GxFwwgG7WqMHSdMqRmJZ1HF4D08DCywcsRpts1EZj-S0nGywP6E9hyDvBQ17q5-n3_rb82iHtFFI/s1600/Balinese+Frame-2.jpg" imageanchor="1" title="Balinese Motif Carving as Frame-Download 2"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjBEvEjGkDVfIkR5yzbbQLlkcBAgENln-U-AHyFwrrI41ZoCiErdRoBIqWue1g9C4GxFwwgG7WqMHSdMqRmJZ1HF4D08DCywcsRpts1EZj-S0nGywP6E9hyDvBQ17q5-n3_rb82iHtFFI/s320/Balinese+Frame-2.jpg" /></a></li> <li><a class="lightbox" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi95L3_EP-mUY8ZjELrPCpMnMUQwpNbtPRKhJV86aNBwaNMlHxWNmI_jL4b0HKWy7Rud4K_ktXhydCNTYpmLKrIXPXxkVxHVPVJpx9QefkBGR74Yy5YWfjOYLnJB9MPpcWZJbHkBQc_MV4/s1600/Balinese+Frame-3.jpg" imageanchor="1" title="Balinese Motif Carving-Download 3"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi95L3_EP-mUY8ZjELrPCpMnMUQwpNbtPRKhJV86aNBwaNMlHxWNmI_jL4b0HKWy7Rud4K_ktXhydCNTYpmLKrIXPXxkVxHVPVJpx9QefkBGR74Yy5YWfjOYLnJB9MPpcWZJbHkBQc_MV4/s320/Balinese+Frame-3.jpg" /></a></li> <li><a class="lightbox" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-SicpfDiQe4nMxQk5i_9s4cuOdIMbL3MyIFo7HGDrPxalLlPNoFkeTPXwRUl9-0S_6hbw07QzZm7yvzKP9wQ5nzsZZ3LrNuvvG4ysErSYbt4BFnbiYCKjdxXxyWeV3bmzm-gDmXnG4UU/s1600/Balinese+Frame+4.jpg" imageanchor="1" title="Balinese Frame-Download 4"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-SicpfDiQe4nMxQk5i_9s4cuOdIMbL3MyIFo7HGDrPxalLlPNoFkeTPXwRUl9-0S_6hbw07QzZm7yvzKP9wQ5nzsZZ3LrNuvvG4ysErSYbt4BFnbiYCKjdxXxyWeV3bmzm-gDmXnG4UU/s320/Balinese+Frame+4.jpg" /></a></li> <li>....</li> </ul>
The code above is under the rule of <ul id="art-slide">, while the images still use image lightbox evolution style. S320 is the image size that has a width: 320 pixels and will be proportional to the height. For more clearly and easier to understanding, let's see the article video!
Related Articles
Enjoy the best betting games.
ReplyDeleteviva9988 Online casino game sites where players can enjoy a variety of online casino games. With a variety of online casinos. If you are talking about online casino games, then definitely have to have a game to use the service to play more than a hundred games. Our own website has a collection of popular games and new games to keep players updated continuously. The use of our online casino service is available for both playing on the mobile and playing on the computer. Along with the live betting games that are broadcast from the famous gambling resources of Cambodia, Poipet. A variety of online casino gambling sites enjoy and provide the convenience of playing. No matter which online casino game you have, it's all about entertainment. Challenge your loved ones with online casino games that are entertainment 24 hours to serve you well. Get rich quick from playing your favorite online casino games. จีคลับ