Implementing Diapo in Blogger

Diapo is a jQuery plugin for creating content sliders with beautiful and custom transition effects. It can display images, videos or any other HTML and can be browsed manually (with prev-next buttons or pagination links that also displays thumbnails) or the auto-slideshow functionality. The plugin is mobile-ready and has options to enable-disable features for mobile usage . Transitions can also be customized by defining sliced rows-columns, the transition period and more.

             See Demo                                                                                            Download

Steps to Add it to Blogger:

1.Login to the Blogger account

2. Now Go to Design > Edit HTML.


3.Now search for the </head> tag and paste the following code just Above/Before it. (How to copy code easily)
<link rel='stylesheet' id='style-css'  href='diapo.css' type='text/css' media='all' /> 
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'></script>
<script type='text/javascript' src='jquery.easing.1.3.js'></script> 
<script type='text/javascript' src='jquery.hoverIntent.minified.js'></script> 
<script type='text/javascript' src='diapo.js'></script> 
<script>
$(function(){
 $('.pix_diapo').diapo();
});
</script>

 

Note: Please Host all the files on free hosting service like DropBox or Blogspot itself!


2.Go to the Post/Page/Gadget you want to add this plugin and then go to Edit HTML tab .


3.Now copy the code from below and paste it there. (How to copy code easily)

<link rel='stylesheet' id='style-css'  href='diapo.css' type='text/css' media='all' /> 
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'></script>
<script type='text/javascript' src='jquery.easing.1.3.js'></script> 
<script type='text/javascript' src='jquery.hoverIntent.minified.js'></script> 
<script type='text/javascript' src='diapo.js'></script> 
<script>
$(function(){
 $('.pix_diapo').diapo();
});
</script>

Note: Please Host all the files on free hosting service like DropBox or Blogspot itself!

4.Now for adding the images into this plugin see the following markup:

<div class="pix_diapo">


<div data-thumb="Small.jpg">
<img src="Large.jpg">
<div class="caption elemHover fromLeft">
This is a simple sliding image with caption. You can have more than one caption and decide the layout of the caption via css.
</div>
</div>

<div data-thumb="Small1.jpg">
<img src="Large1.jpg"> 
<div class="caption elemHover fromRight" style="bottom:65px; padding-bottom:5px; color:#ff0; text-transform:uppercase">
Here you can see two captions.
</div>
<div class="caption elemHover fromLeft" style="padding-top:5px;">
The first are loaded immediately before than the second one
</div>
</div>



<div data-thumb="Small2.jpg" data-time="7000">
<img src="Large2.jpg">
<div class="elemHover caption fromLeft">
You can also get the same effect as the caption with:
</div>
</div>



<div data-thumb="Small3.jpg">
<iframe width="940" height="470" src="http://www.youtube.com/embed/qas5lWp7_R0?wmode=transparent&autoplay=1" data-fake="FakeLarge3.jpg" frameborder="0" allowfullscreen></iframe>
<div class="elemHover caption fromLeft elemToHide">
You can also display videos, but it requires a "fake image" a.k.a. the Screenshot of video before starting
</div>
</div>



</div>

The div block with class “pix_diapo” is the container of the images to be displayed.

data-thumb is the container of the thumbnail which appears when mouse is hovered over the pagination icons.
The class “Caption elemHover fromZZZZ” is used to define the caption for the Slide. Here ZZZZ can be replaced by left ,right,top or bottom. ZZZZ defines from where the caption will enter the screen.

Videos are also embeddable but you will have put a fake image for the slide transitions. The fake image should normally be the starting screenshot of the video itself like for example if you are embedding a YouTube Video then the starting screenshot should be something like this

As you see the Image contains the Play button from YouTube to make it look like a real video

Here are some customized JavaScript for changing default Options:

<script>
$(function(){
 $('.pix_diapo').diapo({fx: 'scrollHorz', time: '5000'}); 
});
</script>

Here fx is the effect you want to apply between slide transitions (by default it is random)
time is the interval in microseconds between sliding .
For even more Options visit Here

5.Now save the Post/Page.


             See Demo                                                                                            Download

41 Replies to “Implementing Diapo in Blogger”

  1. http://mobers.org but i just removed the whole code after playing half an hour – trying to make it work 🙁 I can put it again if you want me to . it may work but some other script might be causing the problem ( i don't know). Would be awesome if you help me implement Diapo.

  2. @psydex

    Just for test run
    first put this code in the div tag

    <div class="pix_diapo">
    <div data-thumb="http://4.bp.blogspot.com/-2VOdcboF0iA/TmCLRprTTmI/AAAAAAAABDE/S65e9qPky7g/s1600/megamind1048.jpg"&gt;
    <img src="http://2.bp.blogspot.com/-Cb7laJOWmX0/TmCLOUgTKDI/AAAAAAAABCs/J-I-zm6MSpg/s1600/megamind1048.jpg"&gt;
    <div class="caption elemHover fromLeft">
    This is a simple sliding image with caption. You can have more than one caption and decide the layout of the caption via css.
    </div>
    </div>
    <div data-thumb="http://2.bp.blogspot.com/-vfQxzQfv-Ac/TmCLRdmZ42I/AAAAAAAABDA/YJhT2pd28cU/s1600/megamind_07.jpg"&gt;
    <img src="http://1.bp.blogspot.com/-R8LPtgeYD18/TmCLNfCnLMI/AAAAAAAABCo/VwzqBibIw3s/s1600/megamind_07.jpg"&gt;
    <div class="caption elemHover fromRight" style="bottom:65px; padding-bottom:5px; color:#ff0; text-transform:uppercase">
    Here you can see two captions.
    </div>
    <div class="caption elemHover fromLeft" style="padding-top:5px;">
    The first are loaded immediately before than the second one
    </div>
    </div>
    </div>

  3. @psydex
    The issue was with the image dimensions , the default image should be of 940X470 (large one) and 50X50 (small one). I think this image dimensions suits your blog just right, so just make sure that all your images are the correct dimensions , if by chance they aren't just add a width and height tag .

  4. i think the problem was in the code itself 'cuz now i placed the exact same image (not resized) and it shows up. Thanks by the way.

    Got few more questions:
    – can i stretch the slider to 1000px. width
    – can i hide the navigation below it (the dots with the thumb and the play/pouse button)

  5. @psydex
    1st-Go to the diapo.css , then under the .pix_diapo change the height and width according to your wishes

    2nd- Just set the pagination option false, Here is a customized JavaScript for that

    <script>
    $(function(){
    $('.pix_diapo').diapo({pagination: 'false'});
    });
    </script>

  6. Something is not right (again).
    All i manage to display at the moment is black screen and nothing more. I've tried to reverse the code as you showed me above but still get the black screen 🙁 Can you help me? 🙁 Do you have skype or twitter?

  7. @OkamiS

    No no,not in this tutorial, I am talking about your Blog, your blog has jQuery library included like 5 times. (the code is similar to that as you can see in Line 2 of Step 3)

    In a nutshell, u have included it multiple times in your blog for maybe various plugins and now its interfering with the Slider. Just include it once

  8. can you please state all steps in details
    I did the first step correctly
    but i dint got the second step
    I am not getting where to paste the second code
    please help i really want this slider

  9. Hello, I wonder how to insert the beautiful "A BUTTON" and "OR TWO BUTTONS" like your demo page?
    And I just wanna change it to "READ MORE" button.

    Thank you so much!

  10. its giving the error
    Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly.
    XML error message: The element type "img" must be terminated by the matching end-tag /img.
    Error 500

  11. hola que tal , can you speak spanish? ingrese el widget a mi blog de prueba pero no aparece con el efecto diapositiva 🙁 me aparece una imagen debajo de la otra sin efecto.

Leave a Reply

Your email address will not be published. Required fields are marked *