Tutorial para agregar Slideshow en un blog

spacedeejays · 27 Nov 2011

Hola que tal comunidad, me preguntaba si alguien me podia pasar un tutorial para poner un Slideshow en mi blog:
asi: Enlace eliminado

O de otros estilos no pasa nada.. gracias

retobaa · 27 Nov 2011

me sumo a tu pregunta...

K Johnson · 27 Nov 2011

SI desean algo así envíenme un MP y yo me comprometo en ayudarlos si Lo Desean

tonydalys · 27 Nov 2011

yo estaba viendo que alli en PB hay las mismas plantillas con y sin slideshow ...una vez puse la misma plantilla en dos blogs una con y otra sin slideshow y asi saque el codigo comparando el codigo de la platilla...no se me ocurrio otra y soy novato

kiras70 · 27 Nov 2011

dame 5 minutos.... y veo si lo saco...

la verdad la plantilla es bastante confusa, logre sacar la mayor parte de slide pero aun me falta un script

css:

Insertar CODE, HTML o PHP:

#myGallery,#myGallerySet,#flickrGallery{width:610px;height:320px;z-index:5;margin-bottom:20px;margin-top:5px;overflow:hidden;}
.jdGallery a{outline:0}
#flickrGallery{width:500px;height:334px}
#myGallery img.thumbnail,#myGallerySet img.thumbnail{display:none}
.jdGallery{overflow:hidden;position:relative}
.jdGallery img{border:0;margin:0}
.jdGallery .slideElement{width:100%;height:100%;background-color:#000;background-repeat:no-repeat;background-position:center center;background-image:url('http://3.bp.blogspot.com/-4WqeLn8Xn5s/TsFr2n93GGI/AAAAAAAACY4/Ia2WLENfWR8/s000/loading-bar-black.png')}
.jdGallery .loadingElement{width:100%;height:100%;position:absolute;left:0;top:0;background-color:#000;background-repeat:no-repeat;background-position:center center;background-image:url('http://3.bp.blogspot.com/-4WqeLn8Xn5s/TsFr2n93GGI/AAAAAAAACY4/Ia2WLENfWR8/s000/loading-bar-black.png')}
.jdGallery .slideInfoZone{position:absolute;z-index:10;width:100%;margin:0;left:0;bottom:0;height:120px;background:#555;color:#fff;text-indent:0;overflow:hidden}
* html .jdGallery .slideInfoZone{bottom:-1px}
.jdGallery .slideInfoZone h2{padding:0;margin:0;margin:2px 5px;font-size:14px;font-weight:bold;color:#fff !important}
.jdGallery .slideInfoZone p{padding:0;font-size:12px;margin:2px 5px;color:#eee}
.jdGallery div.carouselContainer{position:absolute;height:135px;width:100%;z-index:10;margin:0;left:0;top:0}
.jdGallery a.carouselBtn{position:absolute;bottom:0;right:30px;height:20px;/*width:100px;background:url('img/carousel_btn.gif') no-repeat;*/
text-align:center;padding:0 10px;font-size:13px;background:#333;color:#fff;cursor:pointer}
.jdGallery .carousel{position:absolute;width:100%;margin:0;left:0;top:0;height:115px;background:#333;color:#fff;text-indent:0;overflow:hidden}
.jdExtCarousel{overflow:hidden;position:relative}
.jdGallery .carousel .carouselWrapper,.jdExtCarousel .carouselWrapper{position:absolute;width:100%;height:78px;top:10px;left:0;overflow:hidden}
.jdGallery .carousel .carouselInner,.jdExtCarousel .carouselInner{position:relative}
.jdGallery .carousel .carouselInner .thumbnail,.jdExtCarousel .carouselInner .thumbnail{cursor:pointer;background:#000;background-position:center center;float:left;border:solid 1px #fff}
.jdGallery .wall .thumbnail,.jdExtCarousel .wall .thumbnail{margin-bottom:10px}
.jdGallery .carousel .label,.jdExtCarousel .label{font-size:13px;position:absolute;bottom:5px;left:10px;padding:0;margin:0}
.jdGallery .carousel .wallButton,.jdExtCarousel .wallButton{font-size:10px;position:absolute;bottom:5px;right:10px;padding:1px 2px;margin:0;background:#222;border:1px solid #888;cursor:pointer}
.jdGallery .carousel .label .number,.jdExtCarousel .label .number{color:#b5b5b5}
.jdGallery a{font-size:100%;text-decoration:none;color:#fff}
.jdGallery a.right,.jdGallery a.left{position:absolute;height:99%;width:25%;cursor:pointer;z-index:10;filter:alpha(opacity=20);-moz-opacity:0.2;-khtml-opacity:0.2;opacity:0.2}
* html .jdGallery a.right,* html .jdGallery a.left{filter:alpha(opacity=50)}
.jdGallery a.right:hover,.jdGallery a.left:hover{filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity:0.8;opacity:0.8}
.jdGallery a.left{left:0;top:0;background:url('http://3.bp.blogspot.com/-B9ro1avFJGU/TsFr24QEtZI/AAAAAAAACZA/Tg5tZzRsrTI/s000/fleche1.png') no-repeat center left}
* html .jdGallery a.left{background:url('http://1.bp.blogspot.com/-dn3_85MFNGY/TsFr3EknZ2I/AAAAAAAACZI/W6wRRSk-wHo/s000/fleche1.gif') no-repeat center left}
.jdGallery a.right{right:0;top:0;background:url('http://4.bp.blogspot.com/-cc_q4sxG3DY/TsFr3A5vgVI/AAAAAAAACZQ/LH3j29m43oY/s000/fleche2.png') no-repeat center right}
* html .jdGallery a.right{background:url('http://3.bp.blogspot.com/-8HBAk-7DhYE/TsFr3YZh6_I/AAAAAAAACZY/8k73iq4AOwA/s000/fleche2.gif') no-repeat center right}
.jdGallery a.open{left:0;top:0;width:100%;height:100%}
.withArrows a.open{position:absolute;top:0;left:25%;height:99%;width:50%;cursor:pointer;z-index:10;background:none;-moz-opacity:0.8;-khtml-opacity:0.8;opacity:0.8}
.withArrows a.open:hover{background:url('http://3.bp.blogspot.com/-Xppa3TPA2pw/TsFr3XFDzcI/AAAAAAAACZg/F9BUGCcP1f4/s000/open.png') no-repeat center center}
* html .withArrows a.open:hover{background:url('http://1.bp.blogspot.com/-NLt5AuNfAUk/TsFr3ndbs5I/AAAAAAAACZo/D6epg7sRyfw/s000/open.gif') no-repeat center center;filter:alpha(opacity=80)}
/* Gallery Sets */
.jdGallery a.gallerySelectorBtn{z-index:15;position:absolute;top:0;left:30px;height:20px;/*width:100px;background:url('img/carousel_btn.gif') no-repeat;*/
text-align:center;padding:0 10px;font-size:13px;background:#333;color:#fff;cursor:pointer;opacity:.4;-moz-opacity:.4;-khtml-opacity:0.4;filter:alpha(opacity=40)}
.jdGallery .gallerySelector{z-index:20;width:100%;height:100%;position:absolute;top:0;left:0;background:#000}
.jdGallery .gallerySelector h2{margin:0;padding:10px 20px 10px 20px;font-size:20px;line-height:30px;color:#fff !important}
.jdGallery .gallerySelector .gallerySelectorWrapper{overflow:hidden}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton{margin-left:10px;margin-top:10px;border:1px solid #888;padding:5px;height:40px;color:#fff;cursor:pointer;float:left}
.jdGallery .gallerySelector .gallerySelectorInner div.hover{background:#333}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton div.preview{background:#000;background-position:center center;float:left;border:none;width:40px;height:40px;margin-right:5px}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton h3{margin:0;padding:0;font-size:12px;font-weight:normal;color:#fff}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton p.info{margin:0;padding:0;font-size:12px;font-weight:normal;color:#fff !important}

javascript:

Enlace eliminado

este codigo va despues de : <div id='main-wrapper'>

Insertar CODE, HTML o PHP:

<!-- Featured Content Slider Started -->

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>

<script type='text/javascript'>
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true,
delay: 6000,
slideInfoZoneOpacity: 0.8,
showCarousel: false,
slideInfoZoneSlide: false
});
}
window.addEvent('domready', startGallery);
</script>

<div class='fullbox_excerpt'>
<div class='fullbox_content'>
<div class='smooth_gallery'>
<div id='myGallery'>

<div class='imageElement'>
<h3>This is featured post 1 title</h3>
<p>Replace these every slider sentences with your featured post descriptions.Go to Blogger edit html and find these sentences.Now replace these with your own descriptions.</p>
<a class='open' href='SLIDER-1-URL-HERE' title='This is featured post 1'/>
<img alt='' class='full' src='http://1.bp.blogspot.com/-_MbewO2Nkac/TsFr4uy0rPI/AAAAAAAACag/15GU3aPGIhk/s000/1.jpg'/>
</div>

<div class='imageElement'>
<h3>This is featured post 2 title</h3>
<p>Replace these every slider sentences with your featured post descriptions.Go to Blogger edit html and find these sentences.Now replace these with your own descriptions.</p>
<a class='open' href='SLIDER-2-URL-HERE' title='This is featured post 2'/>
<img alt='' class='full' src='http://1.bp.blogspot.com/-OfhLnPR886E/TsFr4uLwy0I/AAAAAAAACao/F8sUTcHoy8E/s000/2.jpg'/>
</div>

<div class='imageElement'>
<h3>This is featured post 3 title</h3>
<p>Replace these every slider sentences with your featured post descriptions.Go to Blogger edit html and find these sentences.Now replace these with your own descriptions.</p>
<a class='open' href='SLIDER-3-URL-HERE' title='This is featured post 3'/>
<img alt='' class='full' src='http://3.bp.blogspot.com/-ylIikCU6r7o/TsFr49cFs-I/AAAAAAAACaw/COA12agoxOs/s000/3.jpg'/>
</div>

<div class='imageElement'>
<h3>This is featured post 4 title</h3>
<p>Replace these every slider sentences with your featured post descriptions.Go to Blogger edit html and find these sentences.Now replace these with your own descriptions.</p>
<a class='open' href='SLIDER-4-URL-HERE' title='This is featured post 4'/>
<img alt='' class='full' src='http://1.bp.blogspot.com/-U5Dyd7S4pfs/TsFr5J9jvvI/AAAAAAAACa4/a5Bcf9ovEks/s000/4.jpg'/>
</div>

<div class='imageElement'>
<h3>This is featured post 5 title</h3>
<p>Replace these every slider sentences with your featured post descriptions.Go to Blogger edit html and find these sentences.Now replace these with your own descriptions.</p>
<a class='open' href='SLIDER-5-URL-HERE' title='This is featured post 5'/>
<img alt='' class='full' src='http://1.bp.blogspot.com/-bumnLKD28I8/TsFr5DneHeI/AAAAAAAACbA/ZKrKr4AQoDM/s000/5.jpg'/>
</div>

</div></div></div></div></b:if></b:if>

<!-- Featured Content Slider End -->

pero faltan algunos js para hacerlo funcionar deben estar en la plantilla, la buscaria pero me mandaron a dormir me habian dado 5 minutos >^< espero te sirvan un poco, puedes buscar los demas que faltan.

odio tener consiencia ... la verdad fui a ver naruto ._. y por eso no lo ise antes sorry >.<

bueno te hago un pequeño tuto:...

este slide

Enlace eliminado

antes de </head> pega esto:

Insertar CODE, HTML o PHP:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>

<script type='text/javascript'>
//<![CDATA[

$(document).ready(function() {

//Execute the slideShow, set 6 seconds for each images
slideShow(3000);

});

function slideShow(speed) {

//append a LI item to the UL list for displaying caption
$('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>');

//Set the opacity of all images to 0
$('ul.slideshow li').css({opacity: 0.0});

//Get the first image and display it (set it to full opacity)
$('ul.slideshow li:first').css({opacity: 1.0});

//Get the caption of the first image from REL attribute and display it
$('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title'));
$('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt'));

//Display the caption
$('#slideshow-caption').css({opacity: 0.7, bottom:0});

//Call the gallery function to run the slideshow
var timer = setInterval('gallery()',speed);

//pause the slideshow on mouse over
$('ul.slideshow').hover(
        function () {
                clearInterval(timer);
        },
        function () {
                timer = setInterval('gallery()',speed);
        }
);

}

function gallery() {

//if no IMGs have the show class, grab the first image
var current = ($('ul.slideshow li.show')?  $('ul.slideshow li.show') : $('#ul.slideshow li:first'));

//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));

//Get next image caption
var title = next.find('img').attr('title');
var desc = next.find('img').attr('alt');

//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);

//Hide the caption first, and then set and display the caption
$('#slideshow-caption').animate({bottom:-70}, 300, function () {
                //Display the content
                $('#slideshow-caption h3').html(title);
                $('#slideshow-caption p').html(desc);
                $('#slideshow-caption').animate({bottom:0}, 500);
});

//Hide the current image
current.animate({opacity: 0.0}, 1000).removeClass('show');

}

//]]>
</script>

<style type="text/css">
ul.slideshow {
list-style:none;
width:600px;
height:240px;
overflow:hidden;
position:relative;
margin:0;
padding:0;
font-family:Arial,Helvetica,Trebuchet MS,Verdana;
;
}
ul.slideshow li {
position:absolute;
left:0;
right:0;
}
ul.slideshow li.show {
z-index:500;
}
ul img {
width:600px;
height:240px;
border:none;
}
#slideshow-caption {
width:600px;
height:70px;
position:absolute;
bottom:0;
left:0;
color:#fff;
background:#000;
z-index:500;
}
#slideshow-caption .slideshow-caption-container {
padding:5px 10px;
z-index:1000;
}
#slideshow-caption h3 {
margin:0;
padding:0;
font-size:16px;
}
#slideshow-caption p {
margin:5px 0 0 0;
padding:0;
}
</style>

ve a elementos de pagina> nuevo gadget > HTML/Javascript : dentro pegas esto

Insertar CODE, HTML o PHP:

<ul class="slideshow">

<li><a href="#"><img src="http://3.bp.blogspot.com/_4HKUHirY_2U/TEVd7gbRVeI/AAAAAAAABGc/J-aSBfN0rhw/s1600/1.jpg" title="This is featured post 1 title" alt="Replace This Text With Your Featured Post 1 Description." /></a></li>

<li><a href="#"><img src="http://2.bp.blogspot.com/_4HKUHirY_2U/TEVd7zgT63I/AAAAAAAABGk/9vJ6VYTYGWM/s1600/2.jpg" title="This is featured post 2 title" alt="Replace This Text With Your Featured Post 2 Description." /></a></li>

<li><a href="#"><img src="http://4.bp.blogspot.com/_4HKUHirY_2U/TEVd8JKsDaI/AAAAAAAABGs/vzECCT1mDws/s1600/3.jpg" title="This is featured post 3 title" alt="Replace This Text With Your Featured Post 3 Description." /></a></li>

<li><a href="#"><img src="http://1.bp.blogspot.com/_4HKUHirY_2U/TEVd8VPgRRI/AAAAAAAABG0/O4yhLEWG5UU/s1600/4.jpg" title="This is featured post 4 title" alt="Replace This Text With Your Featured Post 4 Description." /></a></li>

</ul>

hay cambias las imagenes y todo eso suerte :encouragement:

juanmiguel22 · 28 Nov 2011

ahora mismo voy a probarlo, graciass

K Johnson · 28 Nov 2011

SI eso esta bueno

Tutorial para agregar Slideshow en un blog

spacedeejays

retobaa

K Johnson

tonydalys

kiras70

juanmiguel22

K Johnson

Temas similares