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

Written by Prayag Verma

Find me on Twitter

Email Newsletter

Like what you read here in this post ?
Get new posts delivered straight to your inbox

Post a Comment

nice keep it up

Anonymous said...

I LOVE this blog <3

psydex said...

there's a mistake in the 1st code.
an error pops up >>>>>> The element type "link" must be terminated by the matching end-tag "".

@psydex
Thanks for pointing out ..Rectified

psydex said...

the script loads (after modifying the code) but it shows nothing! just black screen

@psydex

Please give the URL where you have tested Diapo

psydex said...

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.

@psydex
Put it back and i will help you get it working

psydex said...

give me 5 minutes and i'm ready!

@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">
<img src="http://2.bp.blogspot.com/-Cb7laJOWmX0/TmCLOUgTKDI/AAAAAAAABCs/J-I-zm6MSpg/s1600/megamind1048.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="http://2.bp.blogspot.com/-vfQxzQfv-Ac/TmCLRdmZ42I/AAAAAAAABDA/YJhT2pd28cU/s1600/megamind_07.jpg">
<img src="http://1.bp.blogspot.com/-R8LPtgeYD18/TmCLNfCnLMI/AAAAAAAABCo/VwzqBibIw3s/s1600/megamind_07.jpg">
<div class="caption elemHover fromRight" style="bottom:65px; padding-bottom:5px; color:#ff0; text-transform:uppercase">
Here you can see two captions.
</div>
&…

psydex said...

It seems to be working fine. Then what am i doing wrong ? :(

@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 .

psydex said...

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)

@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>

psydex said...

Awesome , but the Pouse button still appears

@psydex

The following JavaScript removes the Pause/Play button but it also stops the slideshow from advancing automatically.

<script>
$(function(){
$('.pix_diapo').diapo();
$('selector').diapoStop();
});

</script>

@psydex

OOhh sorry my mistake, here is the correct JavaScript

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

psydex said...

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?

@psydex

Check out the Demo page , it has no pause/play button and no pagination , just see the JavaScript in Comment No. 17 ,

My twitter URL is https://twitter.com/#!/StylifyYourBlog

@OkamiS
Hi there,

you have included the jQuery library on your page 5 times, please just include it onces, thats causing the problem

see it how it looks http://dl.dropbox.com/u/27675057/anime.html

@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

dvshubham said...

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

@dvshubham
I suppose you are using New Blogger Interface, instead of going to Design >Edit HTML ,go to Templates > Edit HTML ,rest everything is same

dvshubham said...

http://paulbudhe.blogspot.com/2012/01/this-is-simple-sliding-image-with_09.html

the slider is not staring i have included image and resized it
still slider not starting

@dvshubhamYou are not using the public links of the Dropbox files , check this tutorial to see how to get the public links

http://www.stylifyyourblog.com/2011/08/hosting-your-files-on-dropbox.html

dvshubham said...

please help
I am using public links still slider not starting
for test I made a new blog still not working please help
please!!

@dvshubhamYou have declared jQuery library two times in your blog , delete the one with version 1.3.2

FJ said...

Hello, this plugin is awesome, but I would want to have 2 Sliders in the same HTML, any suggestion?

@FJ Indeed. As of now this plugin does not support multiple instances on the same page, the person who developed it (Manuel Masia) is aware of it and has said that he will address it in the next version.

lunaticg said...

Ok. found it. I asked about this in your other post just now.
Thanks. Your blog really rock. retweet this for you.

Thanks

Duta said...

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!

I loved this but its not working in my blog and so has to remove it its giving me error 500 and also saying img tag should be closed

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

Dj's Club said...

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.

shafeeq ts said...

wah... i am really searching for this like article.. thx for sharing..

Admin said...

Not working anymore? The slider is giving me some Error 500