Today I’ll be featuring another cool widget which you can integrate in your Blogger site, which is a beautiful jQuery photo gallery with description effect from Bloggertrix. Adding it is simple, and you can also add a description to your selected image, even in the animation.
Steps:
- Go to Blogger Dashboard.
- Click on the drop down menu > Layout
- Click Add Gadget > HTML/Javascript
- Copy and paste this code provided below:
<script type="text/javascript" src="http://bloggertrixcode.googlecode.com/files/jquery-1.3.1.min.js"></script> <script type="text/javascript" src="http://bloggertrixcode.googlecode.com/files/jquery.scrollTo.js"></script> <script> $(document).ready(function() { //Speed of the slideshow var speed = 5000; //You have to specify width and height in #slider CSS properties //After that, the following script will set the width and height accordingly $('#mask-gallery, #gallery li').width($('#slider').width()); $('#gallery').width($('#slider').width() * $('#gallery li').length); $('#mask-gallery, #gallery li, #mask-excerpt, #excerpt li').height($('#slider').height()); //Assign a timer, so it will run periodically var run = setInterval('newsscoller(0)', speed); $('#gallery li:first, #excerpt li:first').addClass('selected'); //Pause the slidershow with clearInterval $('#btn-pause').click(function () { clearInterval(run); return false; }); //Continue the slideshow with setInterval $('#btn-play').click(function () { run = setInterval('newsscoller(0)', speed); return false; }); //Next Slide by calling the function $('#btn-next').click(function () { newsscoller(0); return false; }); //Previous slide by passing prev=1 $('#btn-prev').click(function () { newsscoller(1); return false; }); //Mouse over, pause it, on mouse out, resume the slider show $('#slider').hover( function() { clearInterval(run); }, function() { run = setInterval('newsscoller(0)', speed); });}); function newsscoller(prev) { //Get the current selected item (with selected class), if none was found, get the first item var current_image = $('#gallery li.selected').length ? $('#gallery li.selected') : $('#gallery li:first'); var current_excerpt = $('#excerpt li.selected').length ? $('#excerpt li.selected') : $('#excerpt li:first'); //if prev is set to 1 (previous item) if (prev) { //Get previous sibling var next_image = (current_image.prev().length) ? current_image.prev() : $('#gallery li:last'); var next_excerpt = (current_excerpt.prev().length) ? current_excerpt.prev() : $('#excerpt li:last'); //if prev is set to 0 (next item) } else { //Get next sibling var next_image = (current_image.next().length) ? current_image.next() : $('#gallery li:first'); var next_excerpt = (current_excerpt.next().length) ? current_excerpt.next() : $('#excerpt li:first'); } //clear the selected class $('#excerpt li, #gallery li').removeClass('selected'); //reassign the selected class to current items next_image.addClass('selected'); next_excerpt.addClass('selected'); //Scroll the items $('#mask-gallery').scrollTo(next_image, 800); $('#mask-excerpt').scrollTo(next_excerpt, 800); } </script> <style> #slider { /* You MUST specify the width and height */ width:660px; height:275px; position:relative; overflow:hidden; -moz-box-shadow: 0px 0px 6px #000000; -webkit-box-shadow: 0px 0px 6px #000000; box-shadow: 0px 0px 6px #000000; } #mask-gallery { overflow:hidden; } #gallery { list-style:none; margin:0; padding:0; z-index:0; width:900px; overflow:hidden; } #gallery li { float:left; } #mask-excerpt { position:absolute; top:0; left:0; z-index:500; width:100px; overflow:hidden; } #excerpt { filter:alpha(opacity=60); -moz-opacity:0.6; -khtml-opacity: 0.6; opacity: 0.6; list-style:none; margin:0; padding:0; z-index:10; position:absolute; top:0; left:0; width:100px; background-color:#000; overflow:hidden; font-family:arial; font-size:14px; color:#fff; } #excerpt li { padding:5px; } .clear { clear:both; } #btn-prev { border-top: 1px solid #96d1f8; background: #65a9d7; padding: 4px 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0; -moz-box-shadow: rgba(0,0,0,1) 0 1px 0; box-shadow: rgba(0,0,0,1) 0 1px 0; text-shadow: rgba(0,0,0,.4) 0 1px 0; color: white; font-size: 9px; font-family: Georgia, serif; text-decoration: none; vertical-align: middle; } #btn-prev:hover { border-top-color: #28597a; background: #28597a; color: #ccc; } #btn-prev:active { border-top-color: #238acf; background: #238acf; } #btn-next { border-top: 1px solid #96d1f8; background: #65a9d7; padding: 4px 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0; -moz-box-shadow: rgba(0,0,0,1) 0 1px 0; box-shadow: rgba(0,0,0,1) 0 1px 0; text-shadow: rgba(0,0,0,.4) 0 1px 0; color: white; font-size: 9px; font-family: Georgia, serif; text-decoration: none; vertical-align: middle; } #btn-next:hover { border-top-color: #28597a; background: #28597a; color: #ccc; } #btn-next:active { border-top-color: #238acf; background: #238acf; } </style> <div id="debug"></div> <div id="slider"> <div id="mask-gallery"> <ul id="gallery"> <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHiaRnnildROe_BeN4lwQluCFsEtLPAKm3akIr8aI11TVNv9nHmjswPasWZIQl8FtfVgnjKBUVSOBFSXEZNhNmexWpCYmyaJAAccjC6CtuR-bdNjvquyiB2uPWpS1ojkU3WJRD012uDcs/s1600/btrix_image2" width="660" height="275" alt=""/></li> <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMFEOqvpSsPgSoeUszBu86q5QkXCWia8LHSj7bI4AjVYaIToYFDcnhl_1m3aZe4kdpU7QUGbaBq7wH1ty5tziTzxgfpO14dN9UQ-HXIgk82AhjFWlV00sTZtRgEZAuexltpTkkNz5p5i0/s1600/btrix_image1.jpg" width="660" height="275" alt=""/></li> <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx7boGfTTqTbF7UUkkBNuzDZnUn2ZFuJmILCzpSgbdtNVzttyo76kaEnL6BKe2M2c30mVeeNN63xYN0cyue5HfN47aWbr3QVxFysow0ykewXVxQUHK2_0PKgQ3OaToYJ52tZYT_GdQIss/s1600/btrix_image3.jpg" width="660" height="275" alt=""/></li> <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRxkMh0hlKRYLtSDF6T32XhxJZM9yRxn5QzOpvca0_up7NUWIiRElxAdy8zy9U9Dom-Nv6gL6tTD993H8YJd-rpIbzyvUtdHAPKVt6Fn4mh2Jw2ujJnOCMYvXwgnibXlITHBy1U-tr06k/s1600/btrix_image5.jpg" width="660" height="275" alt=""/></li> <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk3hv-HLCwFqxURltKwIQkvrPI59vDU-lRFkXY_leXyoBPmTL30LA-zzoG3ir5U-lPW6yWFtUEgw8K9oe-rRW40nMW6-z4wQsNW_E8U3NLPYYxzcrSlvQWaYzZsV1B0eV7BGfDJGrWElA/s1600/btrix_image4.jpg" width="660" height="275" alt=""/></li> </ul> </div> <div id="mask-excerpt"> <ul id="excerpt"> <li>Cras dictum. Maecenas ut turpis. In vitae erat ac orci dignissim eleifend.</li> <li>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</li> <li>Nunc quis justo. Sed vel ipsum in purus tincidunt pharetra.</li> <li>tristique senectus et netus et malesuada fames ac turpis egestas.</li> <li>Nunc quis justo. Sed vel ipsum in purus tincidunt pharetra.</li> </ul> </div> </div> <div id="buttons" style="width: 100px;margin-left: 260px;padding-left: 25px;height: 25px;"> <a href="#" id="btn-prev">prev</a> <a href="#" id="btn-next">next</a> </div> <div></div>
- Change photos of your choice by changing the image URL.
- You can change the image texts by changing the bolded texts (this part of the code above):
<div id="mask-excerpt"> <ul id="excerpt"> <li>Cras dictum. Maecenas ut turpis. In vitae erat ac orci dignissim eleifend.</li> <li>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</li> <li>Nunc quis justo. Sed vel ipsum in purus tincidunt pharetra.</li> <li>tristique senectus et netus et malesuada fames ac turpis egestas.</li> <li>Nunc quis justo. Sed vel ipsum in purus tincidunt pharetra.</li> </ul> </div> </div>Note: Always have a backup before editing your template.
- Save.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
0 comments:
Post a Comment