Más galería

Esta de la que voy a hablar es una adaptación de algo que ví en Joomía. No es que me gusten mucho ni el resultado ni el original, en comparación con otras soluciones que tengo por aquí, pero no deja de ser una buena alternativa, esta vez con query y nada difícil de instalar. El resultado, en el footer de Este Blog

Así se hace:

.- Para evitar saltos, voy a colocar todo el código junto, tal y como se puede implementar en el blog:

<div id='ja-banner'>

<script src='http://junioscripts.googlepages.com/jquery.js' type='text/javascript'/>

<style type='text/css'>

/*The main module wrapper*/

#jp_gallerie_wrapper {width:600px;height:310px; float:left;position:relative; background: #7c7c7c }

/*The div containing all the images*/

.imagebox {position: absolute; top: 5px; left: 5px; width:450px;height:300px;}

#imagebx {width:450px;height:300px; position:absolute; top:5px; left: 5px}

/*The div containing the individual image*/

.imageitem {overflow:hidden; width:450px;height:300px;}

#nav_column {position:absolute;background:none;z-index: 100;right:5px;top:5px;width:165px;height:300px;}

.nav_item{float: right;width:150px;height:60px;background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy_kn3KEiXvtgui5Ccd4w0Ggp6wh4Ugc-CqTsi4SPWWfscrdsMSG2TTw7UwI8GRFuhXGnKOwl2anPBa25VA6MLAVEEtfcIbBzzouBlc_SGo90gAr8-H6Oku1EyOfL9up9W6jKPMaKMImQ/s1600/item_bg.png) repeat-x 0% 100%;}

.nav_item_active {float: right; width:150px; background: #2186ba url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy_kn3KEiXvtgui5Ccd4w0Ggp6wh4Ugc-CqTsi4SPWWfscrdsMSG2TTw7UwI8GRFuhXGnKOwl2anPBa25VA6MLAVEEtfcIbBzzouBlc_SGo90gAr8-H6Oku1EyOfL9up9W6jKPMaKMImQ/s1600/item_bg.png) repeat-x 0px 100% }

a.nav_link{

line-height:60px; text-align: center; color: #333; font-weight: bold; font-size: 14px;}



.nav_item_active a.nav_link {color:#fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrN2BLvtHffvMjyFLA653-TvxO8W-owYKCt77PMESUhSQjXa08L_of8c0ssSF2K7gu3P-wlAP9NLm1xr_Zj1pl2KCRcIHFa8Ml51x5HMjcrzFuPrNjkfIbzGgoSdrSaMPlJoRX-va4tO4/s400/arrow.png) 0px no-repeat; display:block; margin-left: -15px}



#nav_text {display:none}

.transboxpos{display:none;}

.tbleft{

left:67.5px; top:5px;width:200px; height:300px;

}

.tbright{

right:172.5px; top:5px;width:200px; height:300px;

}

.tbbottom{

left:5px;top: 60%;width:450px;height:90px;

}

#translucentbox {position: absolute; z-index: 1;}

/*The transparent background of the text*/

#translucentbg {

width:100%;height:100%;

background-color: #000000;

filter:alpha(opacity=50);

-moz-opacity:0.5;

opacity: 0.5;

position: absolute;

z-index: 2

}

#opaquetext {

width:90%;height:90%;

background-color: transparent; /* transparent background */

color:#ffffff;padding:5%; font-size: 12px;

position: absolute; /* absolute positioning */

z-index: 3; /* place it over the other DIV */

}





</style>

<script type='text/javascript'>



jQuery.noConflict()

var ppdelay = 7000;

var newsitems;

var curritem=0;

var iPause=0;

var tbtype=&#39;&#39;;

var indicdelay = ppdelay-3000;



jQuery(document).ready(function(){



jQuery(&quot;#imagebx&quot;).css(&quot;display&quot;,&quot;block&quot;);

var tickerSelector = &quot;#imagebx .imageitem&quot;;

newsitems = jQuery(tickerSelector).hide().hover(

function(){

jQuery(this).addClass(&quot;hovered&quot;);

iPause=1;

},

function(){

jQuery(this).removeClass(&quot;hovered&quot;);

iPause=0;

}

).filter(&quot;:eq(0)&quot;).show().add(tickerSelector).size();



jQuery(&quot;.nav_item:eq(&quot;+curritem+&quot;)&quot;).addClass(&quot;nav_item_active&quot;);



var ntext = jQuery(&quot;.ntext:eq(&quot;+curritem+&quot;)&quot;).html();

var csstype = jQuery(&quot;.transboxpos:eq(&quot;+curritem+&quot;)&quot;).text();

switch(csstype){

case &quot;right&quot;:

var tbtype = &#39;tbright&#39;;

break;

case &quot;bottom&quot;:

var tbtype = &#39;tbbottom&#39;;

break;

default:

var tbtype = &#39;tbleft&#39;;

}

jQuery(&quot;#opaquetext&quot;).html(ntext);

jQuery(&quot;#translucentbox&quot;).addClass(tbtype).slideDown(&quot;slow&quot;,function(){

indictimeset = setInterval(function(){showanim()},indicdelay);

});

timeset = setInterval(function(){ticknews()},ppdelay);

});



function ticknews(itemnum) {

if (iPause==0){

jQuery(&quot;.nav_item:eq(&quot;+curritem+&quot;)&quot;).removeClass(&quot;nav_item_active&quot;);

jQuery(&quot;#indic&quot;).hide();

jQuery(&quot;#translucentbox&quot;).slideUp(&quot;slow&quot;,function(){

jQuery(&quot;#translucentbox&quot;).removeClass(tbtype);

});

jQuery(&quot;#imagebx .imageitem:eq(&quot;+curritem+&quot;)&quot;).fadeOut(&quot;slow&quot;,function(){

jQuery(this).hide();

});

if (itemnum !=undefined){

curritem = itemnum;

}else{

curritem = ++curritem%newsitems;

}

jQuery(&quot;.nav_item:eq(&quot;+curritem+&quot;)&quot;).addClass(&quot;nav_item_active&quot;);

jQuery(&quot;#imagebx .imageitem:eq(&quot;+curritem+&quot;)&quot;).fadeIn(&quot;slow&quot;,function(){

var ntext = jQuery(&quot;.ntext:eq(&quot;+curritem+&quot;)&quot;).html();

jQuery(&quot;#opaquetext&quot;).html(ntext);

var csstype = jQuery(&quot;.transboxpos:eq(&quot;+curritem+&quot;)&quot;).text();

switch(csstype){

case &quot;right&quot;:

var tbtype = &#39;tbright&#39;;

break;

case &quot;bottom&quot;:

var tbtype = &#39;tbbottom&#39;;

break;

default:

var tbtype = &#39;tbleft&#39;;

}



jQuery(&quot;#translucentbox&quot;).addClass(tbtype).slideDown(&quot;slow&quot;,function(){

indictimeset = setInterval(function(){showanim()},indicdelay);

});

});

}

}



function ticknews_new(elnum){

clearInterval(timeset);

ticknews(elnum);

timeset = setInterval(function(){ticknews()},ppdelay);

}



</script>





<div id='jp_gallerie_wrapper'>

<div id='translucentbox'>

<div id='translucentbg'/>

<div id='opaquetext'/></div>

<div id='imagebx'>

<div class='imageitem'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjecUYX8kPoyDkX34euEnjWaJMeH4gniCP35denmUoikDmV3ne-aPteeVxB1OvYvPUF0W6CViOxcT9FIuAmpb1opQzyjWX_mvKzEpGq8bXfPLD-ThtSY_C1YsqiGuLgtdGFSZ1WtyJYpqY/s1600/todo.jpg'/></div>

<div class='imageitem'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS5FicluNbFhAk3NIEYSXYJfkvy1_T0slKwtsPQe30Ei0IIrPETMmNdGlDABn8AfnS3q5H9RRN7EnxI1ICGyUs6cjoj5aUGQGP-d9RZhmebBkTY9rdi2N42wLpdw0udbgr4Yp5YU-6HUo/s800/1130095651Paisajes1.jpg'/></div>

<div class='imageitem'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkR8YAjU0uRfnUjs56iU1fR09-44Vb8cn8fiEfJscKAAYG9Stfi2TfJ7ezlC2Ngh0jsxn80QpveYDXtwznxEKnfvkDfI2_BrvMKwA7YXzLB7nPjcjt6j-OZ5siI2nZa66f4AekWJum1kA/s800/merienda_del_cisne.jpg'/></div>

<div class='imageitem'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN6pSCyxcxpMGY0jAPjtZDpYid9RkguuHDYRaIJynvKWUUy4TWnrr-XcyxFJeCZQs_zS2bFmZKv_D2GmaTiM23GFwkxm6LA0vmneNHEJMrQB81WKZTqZgw7CABrQ5mrZty28SmS1pzR8M/s800/airbus.jpg'/></div>

<div class='imageitem'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis1xHRDB57GxReGbCtHU0LzcSwrSwWIkZV9BHcleNfvu3G-r0JdrHNrQG-EZCedCd_WKfBIixYWQXyFzUgi76eX9h9IZOjbugNnQnIDS4MhVB67jE8rkpWgnLw02_-Zm2kC0jVnYM2dWo/s800/gjaguar1.jpg'/></div>

</div>



<div id='nav_column'>







<div class='nav_item' onMouseout='this.style.backgroundColor=""' onMouseover='this.style.backgroundColor="#DAFF76"' onclick='ticknews_new("0")'>

<div class='nav_item_gradient'>

<a class='nav_link' href='http://imagemenulightbox.blogspot.com/'>Plastis</a>

</div>

</div>







<div class='nav_item' onMouseout='this.style.backgroundColor=""' onMouseover='this.style.backgroundColor="#DAFF76"' onclick='ticknews_new("1")'>

<div class='nav_item_gradient'>



<a class='nav_link' href='http://imagemenulightbox.blogspot.com/'>Paisajes</a>

</div>

</div>







<div class='nav_item' onMouseout='this.style.backgroundColor=""' onMouseover='this.style.backgroundColor="#DAFF76"' onclick='ticknews_new("2")'>

<div class='nav_item_gradient'>

<a class='nav_link' href='http://imagemenulightbox.blogspot.com/'>Natura</a>

</div>

</div>









<div class='nav_item' onMouseout='this.style.backgroundColor=""' onMouseover='this.style.backgroundColor="#DAFF76"' onclick='ticknews_new("3")'>

<div class='nav_item_gradient'>

<a class='nav_link' href='http://imagemenulightbox.blogspot.com/'>Varios</a>

</div>

</div>







<div class='nav_item' onMouseout='this.style.backgroundColor=""' onMouseover='this.style.backgroundColor="#DAFF76"' onclick='ticknews_new("4")'>

<div class='nav_item_gradient'>

<a class='nav_link' href='http://imagemenulightbox.blogspot.com/'>Felinos</a>



</div>

</div>





</div>

<div id='transboxpos'>

<div class='transboxpos'>left</div>

<div class='transboxpos'>left</div>

<div class='transboxpos'>left</div>

<div class='transboxpos'>left</div>



<div class='transboxpos'>left</div>



</div>

<div id='nav_text'>

<div class='ntext'>La colección de plastilinas de Hiper... que anda por ahí dispersa y tengo que reunirla en este blog.</div>

<div class='ntext'>Y de aquí en adelante, todo va de animales... parece que no hay otra cosa...</div>

<div class='ntext'>Y de aquí en adelante, todo va de animales... parece que no hay otra cosa....</div>

<div class='ntext'>Pocas imágenes se ajustan a este cuadro...</div>

<div class='ntext'>Y de aquí en adelante, todo va de animales... parece que no hay otra cosa....</div>



</div>





<div class='clr'/>

</div>

</div>