Pregunta sobre Lightbox

Que hay de nuevo yo dando lata, bueno en la pagina que realizo el ing. me pidio que hiciera una galeria de imagenes usando Lightbox yo ni sabia que asi se llamaba, yo solo lo vi como en 2 paginas.

Y pues he buscado en la red primero un poco malo porque solo estan en ingles los tutoriales lo que no entiendo es si tengo que descargar un programa que he visto en algunas paginas o solo es puro codigo en javascript.

 

Pagina original de LigthBox
<a href="http://www.huddletogether.com/projects/lightbox/" target="_blank">http://www.huddletogether.com/projects/lightbox/</a>

Pagina original de LigthBox 2
<a href="http://www.lokeshdhakar.com/projects/lightbox2/" target="_blank">http://www.lokeshdhakar.com/projects/lightbox2/</a>

Para la 2, te descargas <a href="http://www.lokeshdhakar.com/projects/lightbox2/releases/lightbox2.04.zip" target="_blank">http://www.lokeshdhakar.com/projects/light...ightbox2.04.zip</a>

Para instalarla no debes saber Ingles, ni JavaScript, solo debes saber HTML que es lo primero que deberían aprender los que hacen webs ya que es lo único que admiten los navegadores por defecto.


1) Agregas esto en el header:
<!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<script type="text/javascript" src="js/prototype.js"></script>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<script type="text/javascript" src="js/lightbox.js"></script>
<!--c2--></div><!--ec2-->

2) Agregas esto en el header:
<!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<!--c2--></div><!--ec2-->

3) a cada imagen que tengas como link le agregas al tag <a> el parámetro: rel="lightbox"

Ejemplo:
<!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
<!--c2--></div><!--ec2-->

Listo, solo debes saber HTML

 

Lo digo lo de que no entendia ya que l primer version me descargaba un archivo y no sabia si ponerlo dentro del codigo ese archivo que descargue o que onda con el otro lo mismo pero vi que manejaba una carpeta por eso me confundia.

 

Sip, solo lo pones en un archivo aparte y hasta una carpeta si quieres aparte (lo cual es mejor) y te aseguras en las primeras lineas de configurar esa carpeta

 

Una pregunta mas, y esta es sobre Jcarousel, pues me dijeron pon la galeria con esa aplicacion pues ahi voy a aplicarla, despues de que me costo un poco mas quiero saber que comando o tag debo implementar porque en el ejemplo se ve que la imagen la jala de internet y queria jalarla de mi carpeta que tengo y si cambio el url por img src
ya no aparece nada del carusel.


Bueno lo que quiero es saber que poner en vez de url para que jale las imagenes de mi carpeta a menos que tenga que subirlas primero a internet.

este es el codigo
<link href="../style.css" rel="stylesheet" type="text/css" />
<!--
jQuery library
-->
<script type="text/javascript" src="lib/jquery-1.2.3.pack.js"></script>
<!--
jCarousel library
-->
<script type="text/javascript" src="lib/jquery.jcarousel.pack.js"></script>
<!--
Thickbox 3 library
-->
<script type="text/javascript" src="lib/thickbox/thickbox.js"></script>
<!--
jCarousel core stylesheet
-->
<link rel="stylesheet" type="text/css" href="lib/jquery.jcarousel.css" />
<!--
Thickbox stylesheet
-->
<link rel="stylesheet" type="text/css" href="lib/thickbox/thickbox.css" />
<!--
jCarousel skin stylesheet
-->
<link rel="stylesheet" type="text/css" href="skins/ie7/skin.css" />

<script type="text/javascript">
// Set thickbox loading image
tb_pathToImage = "../images/loading-thickbox.gif";

var mycarousel_itemList = [
{img src="images/IMAGEN2", title: "Flower1"},
{url: "http://static.flickr.com/75/199481072_b4a0d09597_s.jpg", title: "Flower2"},
{url: "http://static.flickr.com/57/199481087_33ae73a8de_s.jpg", title: "Flower3"},
{url: "http://static.flickr.com/77/199481108_4359e6b971_s.jpg", title: "Flower4"},
{url: "http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg", title: "Flower5"},
{url: "http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg", title: "Flower6"},
{url: "http://static.flickr.com/58/199481218_264ce20da0_s.jpg", title: "Flower7"},
{url: "http://static.flickr.com/69/199481255_fdfe885f87_s.jpg", title: "Flower8"},
{url: "http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg", title: "Flower9"},
{url: "http://static.flickr.com/70/229228324_08223b70fa_s.jpg", title: "Flower10"}
];

function mycarousel_itemLoadCallback(carousel, state)
{
for (var i = carousel.first; i <= carousel.last; i++) {
if (carousel.has(i)) {
continue;
}

if (i > mycarousel_itemList.length) {
break;
}

// Create an object from HTML
var item = jQuery(mycarousel_getItemHTML(mycarousel_itemList[i-1])).get(0);

// Apply thickbox
tb_init(item);

carousel.add(i, item);
}
};

/**
* Item html creation helper.
*/
function mycarousel_getItemHTML(item)
{
var url_m = item.url.replace(/_s.jpg/g, '_m.jpg');
return '<a href="' + url_m + '" title="' + item.title + '"><img src="' + item.url + '" width="75" height="75" border="0" alt="' + item.title + '" /></a>';
};

jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
size: mycarousel_itemList.length,
itemLoadCallback: {onBeforeAnimation: mycarousel_itemLoadCallback}
});
});

</script>

</head>

<body>
<div id="wrap">

<ul id="mycarousel" class="jcarousel-skin-ie7">
<!-- The content will be dynamically loaded in here -->
</ul>

</div>

</body>
</html>

 

Hola el Quique:
Tengo todo instalado en la carpeta raiz de mi sitio pero no logro que funcione.
Cuando lo ejecuto abre la imagen en una ventana nueva en vez de el efecto lightbox.
Estoy trabajando en DreamWeaver, cuando lo edito allí anda perfectamente, pero cuando lo subo al servidor, no se ve como debería en el explorador.
Lo tenés hecho en algún sitio? Necesitaría saber si mi código está bien.
Muchas gracias !
Cris.