March 22, 2014

Weebly Tricks #41 - JQuery Round the Clock Image Carousel

Posted by Domz at 3/22/2014

JQuery Round the Clock Image Carousel for Weebly


Here is a premium type of carousel you can use for your photo slide show. Photos will be displayed in a rotating pattern with previews you can click on. An additional effect is to bloat up an image with a click after selection. Photos will slide smoothly and for sure readers will love this. With few modifications, this carousel is as easy as ABC to insert in your Weebly site. Please check the demo.







1. To make the effect even better, combine Web Page Preloader with this carousel making the introduction  more satisfying.

2. Ok back to the topic, go to your site's <head> (<head> tips here) and paste the following code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="http://myweeblytricksdemo.weebly.com/files/theme/jqcarousel.js"></script>
<script type="text/javascript">
$(window).load(function () {
$('#gallery').jqcarousel();
});
</script>
<style>
#outer {
  margin: 5px 0px 60px 0px;
}
</style>

The above code uses an external JS file which I edited for the "close" button link source and the bloating size for photos. It is recommended to use high quality photos with same dimensions for a perfect slideshow. I also added the CSS selector #outer just to support the space needed when a photo bloats up.

3. Now time to insert the HTML, go to the page you've chosen to show up this carousel, drag one embed code and paste the following:

<div id="outer">
<div id="gallery">
            <img src="IMAGE SOURCE LINK" alt="IMAGE DESCRIPTION" />
            <img src="IMAGE SOURCE LINK" alt="IMAGE DESCRIPTION" />
            <img src="IMAGE SOURCE LINK" alt="IMAGE DESCRIPTION" />
            <img src="IMAGE SOURCE LINK" alt="IMAGE DESCRIPTION" />
            <img src="IMAGE SOURCE LINK" alt="IMAGE DESCRIPTION" />
            <img src="IMAGE SOURCE LINK" alt="IMAGE DESCRIPTION" />
            <img src="IMAGE SOURCE LINK" alt="IMAGE DESCRIPTION" />

        </div>
</div>

It is understandable that the IMAGE SOURCE LINK is the complete link source of the photos you will use so with the IMAGE DESCRIPTION for the image alt text. You may add more photos by copy pasting one complete line as highlighted in blue.

As I told earlier, this carousel will be more effective with the use of Web Page Preloader as you've seen on the demo page. Stay tune for more tutorials.

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


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!

...

2 comments:

  1. Hi,
    I have been trying to get this to work on my website, but the pictures are just showing up. I was wondering how I would fix it? I have also tried to confirm my subscription in order to access the forum, but haven't received the access code yet.
    Thank you for all the cool tips!

    ReplyDelete
    Replies
    1. Hi 4everjessie,

      Did you received any email from my autoresponder when you subscribe? If yes, the code is in that email. If none, check your spam mail. If still no hope, then send me an email at domingotambasacan@gmail.com.

      Delete

 

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

Home | | Privacy Policy | Top