Showing posts with label Slide Show. Show all posts
Showing posts with label Slide Show. Show all posts

Thursday, August 4, 2011

Slide Show with Any (Most) Google Gadgets : Definition

I would like to share my slide-show which shows above the top of Posts.
This slide-show can be stored any kinds of Google Gadgets you want to show.

After placing the cord : in order to show Google Gadgets inside the slide-show,
  1. You must type your Google Gadgets title as "Slide" *important
  2. As ordering the slides, just drag your Gadgets which you want to show first places above the first Gadget title as "Slide" and second "Slide", third "Slide", and so on
    In fact, you can have slides as many as you want
  3. You are way to go! Also, it is possible to replace the slide-show anywhere inside your blog!
If you want to change the slides effect, please ask me or comment me. There are several effects you can use.
All effects you can find from the link follows.

jQuery Cycle Plugin : Torsten Baldes, Matt Oakes, and Ben Sterling

Unfortunately,  there is a problem in some Google Gadgets, so it may not work every gadgets.
If you have any difficulties using the cord please see these links,

-from C.O.

Slide Show with Any Google Gadgets : Style

This totally depends on your blog.
Please contact me and place your blog link, I'll give you a suggestion.
Thank you.

-from C.O.

Slide Show with Any Google Gadgets : Cord

<script type="text/javascript">
$(document).ready(function (){
/* Slideshow with Any Google Gadgets Created by Chihiro Okamoto : www.c-okamoto.blogspot.com*/
$(".main-outer").prepend('

<div id="slideShow"/>
');
$('h2.title').each(function(index, element) {
var elems = $(this).text();
var arr = jQuery.makeArray(elems);
if(jQuery.inArray("Slide", arr)!=-1){
$(this).css('display','none').parent().css('display','none').appendTo('#slideShow');
}
});

/* Inspired by http://jquery.malsup.com/cycle/ */
$('#slideShow').cycle({
fx: 'scrollHorz',
pause:1,
timeout: 7000,
speedIn: 1000,
speedOut: 1000,
easeIn: 'easeInOutExpo',
easeOut: 'easeInOutExpo'
});

$('#slideShow').children('div').each(function(index, element) {
var marginTop = $('#slideShow').height()-$(this).height();
$(this).css({marginTop:parseInt(marginTop)/2});
});
});
</script>


-from C.O.