Autor Tema: 30 scripts para galerias, slideshows y lightboxes (Leído 4291 veces)

rdoggsv · « : mayo 20, 2007, 05:20:00 pm »

http://www.smashingmagazine.com/2007/05/18/30-best-solutions-for-image-galleries-slideshows-lightboxes/
De nuevo estos señores de smashing magazine se dan la rebusqueda de los mejore scripts relacionados con galerias de imagenes, ubicandolas en categorias como ajax, css, y dom.

Sin duda uno de esos bookmarks que uno nunca sabe cuando va a necesitar pero lo mas seguro es que va a llegar ese dia, vale la pena tenerlo desde ya

De los que he visto todos han sido gratuitos y listos para usar en sus paginas

darkela · « **Respuesta #1 :** mayo 23, 2007, 12:26:55 pm »

que interesante esta esto rdog!

gracias por al info

fermarroquin · « **Respuesta #2 :** mayo 23, 2007, 07:34:45 pm »

Buenisimo aporte, me servirá muchisimo.

darkela · « **Respuesta #3 :** mayo 27, 2007, 02:36:13 pm »

esta puede servir tmabien para galerias en css

Citar

http://www.cssplay.co.uk/menu/index.html

[/b]

..::EVORA::.. · « **Respuesta #4 :** mayo 27, 2007, 02:39:36 pm »

puu q aporte viejo! D verdad q esto si me va a servir d mucho!!

gracias viejo!!

darkela · « **Respuesta #5 :** mayo 27, 2007, 02:53:32 pm »

Cita de: djevorus en mayo 27, 2007, 02:39:36 pm

puu q aporte viejo! D verdad q esto si me va a servir d mucho!! gracias viejo!!

jakajka no se si es a mi lo de biejo pero.. soy niña

..::EVORA::.. · « **Respuesta #6 :** mayo 27, 2007, 02:59:22 pm »

Cita de: darkela en mayo 27, 2007, 02:53:32 pm

jakajka no se si es a mi lo de biejo pero.. soy niña

jajaja.... creo q escribimos las cosas al mismo tiempo!

lo d viejo era para rdogg.. no habia visto el tuyo

pero lo acabo d ver y tambien esta bien bien interesante!!

y si ya se q sos niña

como no conocer a la famosa darkela

darkela · « **Respuesta #7 :** mayo 27, 2007, 03:09:54 pm »

ajkajkajka la famosa dice...
ahi nos contas como dejas tus galerias

..::EVORA::.. · « **Respuesta #8 :** mayo 27, 2007, 03:10:20 pm »

viendo lo q pusiste darkela me gusto mucho una galeria...

Código: [Seleccionar]

http://www.cssplay.co.uk/menu/gallery.html#nogoabajo dice q se puede ocupar sin ningun problema! ... pero la verdad no se adonde darle para bajar la info o el scrypt! D verdad q me va a servir mucho pero

no se como se hace

darkela · « **Respuesta #9 :** mayo 27, 2007, 03:12:51 pm »

dejame ver... y te digo, solo la lei pero no la he traveseado

------------------------------------------------

Vaya mira djevorus...
crea una carpeta ponele cualqueir nombre vea...
dentro de esta carpeta crea una carpeta que se llame spole... en esta spole vas a guardar todas las imagenes... tene sque hacer una imagen pegueña o que sea un pedazo de imagen vea.. que cuando pase el mouse se cargue la grande abajo.

la pequeña debe medir 73x77pix esta es la que aparece arriba y la de abajo la carga asi nomas...

hace una pagina web...
y pegale esto compelto

Citar

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Stu Nicholls | CSSplay | A Photograph Gallery</title>

<meta name="Author" content="Stu Nicholls" />
<meta name="Keywords" content="cssplay, css play, Cascading, Style, Sheets, XHTML, w3c, opacity, mozilla, opera, internet explorer, layout, validation, navigation, menus, CSS experiments, CSS demonstrations, photo, photograph, gallery, slide, slideshow, picture, dropdown, pull up, fly out, file, folder " />
<meta name="Description" content="CSS - Cutting edge Cascading Style Sheets. Experiments in CSS" />
<meta name="verify-v1" content="n3Dpx4NklZjg5p/Tq7h1q+Oj6Ml83crtkO/PwepVQ6Y=" />
<meta http-equiv="imagetoolbar" content="no" />
<link rel="meta" href="http://www.cssplay.co.uk/labels.rdf" type="application/rdf+xml" title="ICRA labels" />
<meta http-equiv="pics-Label" content='(pics-1.1 "http://www.icra.org/pics/vocabularyv03/" l gen true for "http://cssplay.co.uk" r (n 0 s 0 v 0 l 0 oa 0 ob 0 oc 0 od 0 oe 0 of 0 og 0 oh 0 c 0) gen true for "http://www.cssplay.co.uk" r (n 0 s 0 v 0 l 0 oa 0 ob 0 oc 0 od 0 oe 0 of 0 og 0 oh 0 c 0))' />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.cssplay.co.uk/feed.xml" />
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
<link rel="icon" href="../favicon.ico" type="image/ico" />
<link rel="stylesheet" media="all" type="text/css" href="../css/css_play.css" />
<link rel="stylesheet" media="all" type="text/css" href="../css/demos.css" />

<style type="text/css">
.a, .a:visited {color:#000;}
#container {position:relative; width:600px; height:700px; background:#888; border:1px solid #000; margin:10px auto;}
#container b {font-weight:normal; width:600px; text-align:center; position:absolute; bottom:250px; left:0; color:#eee; font-family:tahoma, geneva, "lucida sans unicode", "lucida grande",verdana, sans-serif; letter-spacing:1px; line-height:1.7em; z-index:1;}
a.gallery, a.gallery:visited {display:inline; color:#000; text-decoration:none; border:1px solid #000; width:75px; height:75px; float:left; margin:7px 21px; position:relative; cursor:default;}
a.slidea {background:url(spole/sph1.jpg);}
a.slideb {background:url(spole/sph2.jpg);}
a.slidec {background:url(spole/sph3.jpg);}
a.slided {background:url(spole/sph4.jpg);}
a.slidee {background:url(spole/sph5.jpg);}
a.slidef {background:url(spole/spv1.jpg);}
a.slideg {background:url(spole/spv2.jpg);}
a.slideh {background:url(spole/spv3.jpg);}
a.slidei {background:url(spole/spv4.jpg);}
a.slidej {background:url(spole/spv5.jpg);}
a.gallery span {visibility:hidden; display:block; position:absolute; width:580px; height:500px; top:189px; left:9px; color:#000; background:#ccc; text-align:center; border:1px solid #fff; font-family:tahoma, geneva, "lucida sans unicode", "lucida grande",verdana, sans-serif; letter-spacing:1px; cursor:default;}
a.slidea span {left:-13px; top:180px;}
a.slideb span {left:-132px; top:180px;}
a.slidec span {left:-251px; top:180px;}
a.slided span {left:-370px; top:180px;}
a.slidee span {left:-489px; top:180px;}
a.slidef span {left:-13px; top:89px;}
a.slideg span {left:-132px; top:89px;}
a.slideh span {left:-251px; top:89px;}
a.slidei span {left:-370px; top:89px;}
a.slidej span {left:-489px; top:89px;}
a.gallery:hover {white-space:normal; border:1px solid #fff; z-index:100;}
a.gallery:hover span {visibility:visible; z-index:100;}
a.gallery:hover span img {margin:10px; border:1px solid #000; position:relative; z-index:100;}
a.gallery:active, a.gallery:focus {border:1px solid #c00; z-index:10;}
a.gallery:active span, a.gallery:focus span {visibility:visible; z-index:10;}
a.gallery:active span img, a.gallery:focus span img {border:1px solid #000; position:relative; margin:10px; z-index:10;}
</style>
</head>

<body id="www-cssplay-co-uk">
<div id="wrapper">
<a href="#content" class="hiddenfromview" accesskey="X" title="skip to content"></a>
<div id="showcase">

<div id="info">

<h2> </h2>
<div id="container">
<b>Photographs<br />by kind permission of<br /><a href="http://www.simon-pole.co.uk/">Simon Pole</a></b>
<a class="gallery slidea" href="#nogo"><span><img src="spole/simonh1.jpg" alt="Warm to Cold" title="Warm to Cold" /><br />Warm to Cold</span></a>
<a class="gallery slideb" href="#nogo"><span><img src="spole/simonh2.jpg" alt="Wheels" title="Wheels" /><br />Wheels</span></a>
<a class="gallery slidec" href="#nogo"><span><img src="spole/simonh3.jpg" alt="Urban Squirrel" title="Urban Squirrel" /><br />Urban Squirrel</span></a>
<a class="gallery slided" href="#nogo"><span><img src="spole/simonh4.jpg" alt="Mother and Daughter" title="Mother and Daughter" /><br />Mother and Daughter</span></a>
<a class="gallery slidee" href="#nogo"><span><img src="spole/simonh5.jpg" alt="River Junk" title="River Junk" /><br />River Junk</span></a>
<a class="gallery slidef" href="#nogo"><span><img src="spole/simonv1.jpg" alt="Portrait One" title="Portrait One" /><br />Portrait One</span></a>
<a class="gallery slideg" href="#nogo"><span><img src="spole/simonv2.jpg" alt="Portrait Two" title="Portrait Two" /><br />Portrait Two</span></a>
<a class="gallery slideh" href="#nogo"><span><img src="spole/simonv3.jpg" alt="Portrait Three" title="Portrait Three" /><br />Portrait Three</span></a>
<a class="gallery slidei" href="#nogo"><span><img src="spole/simonv4.jpg" alt="Bow and Fiddle rock" title="Bow and Fiddle rock" /><br />Bow and Fiddle rock</span></a>
<a class="gallery slidej" href="#nogo"><span><img src="spole/simonv5.jpg" alt="The Pose" title="The Pose" /><br />The Pose</span></a>
</div>

<div id="adsie">
<script type="text/javascript">
google_ad_client = "pub-6651950180071236";
google_ad_width = 728;
google_ad_height = 90;
google_ad_format = "728x90_as";
google_ad_type = "text_image";
//2007-01-26: Top banner
google_ad_channel ="1786077217";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "008000";
google_color_url = "008000";
google_color_text = "000000";
</script>

<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</div>

</div>
<br class="clear" />
</div>
<div id="foot"></div>
</div>

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-451410-1";
urchinTracker();
</script>
</body>
</html>

Ya con este codigo te sale la galeria.. y ya podes travesear el codigo a tu antojo..
aqui te dejo un screenshot... de que yo lo probe y asi cargo bn y todo

podes agarrar el codigo de estas galerias, te vas al view el menu de tu navegaador y le das source o view source, lo copias y ya! bueno yo ais lo obtuve..

espero te sirva

..::EVORA::.. · « **Respuesta #10 :** mayo 27, 2007, 03:45:12 pm »

puuuu no digo pues, La Famosa!!

... jeje... Gracias d verdad!! Si q voy a ocupar esto con tanta cosa de la U!

Pero = me gustaria aprender hacer todo esto!, el significado de cada linea y poner distintas formas y colores, dependiendo d la imaginacion! ya vere como lo retoco!
Gracias darkela!!

darkela · « **Respuesta #11 :** mayo 27, 2007, 04:27:29 pm »

de nada ...

chelito · « **Respuesta #12 :** mayo 27, 2007, 05:34:47 pm »

BOOKMARKED!

JGuillen™ · « **Respuesta #13 :** junio 11, 2007, 02:49:11 pm »

Excelente aporte ...!

Sv Community El Salvador

Noticias:

Autor Tema: 30 scripts para galerias, slideshows y lightboxes (Leído 4291 veces)

rdoggsv

30 scripts para galerias, slideshows y lightboxes

darkela

Re: 30 scripts para galerias, slideshows y lightboxes

fermarroquin

Re: 30 scripts para galerias, slideshows y lightboxes

darkela

Re: 30 scripts para galerias, slideshows y lightboxes

..::EVORA::..

Re: 30 scripts para galerias, slideshows y lightboxes

darkela

Re: 30 scripts para galerias, slideshows y lightboxes

..::EVORA::..

Re: 30 scripts para galerias, slideshows y lightboxes

darkela

Re: 30 scripts para galerias, slideshows y lightboxes

..::EVORA::..

Re: 30 scripts para galerias, slideshows y lightboxes

darkela

Re: 30 scripts para galerias, slideshows y lightboxes

..::EVORA::..

Re: 30 scripts para galerias, slideshows y lightboxes

darkela

Re: 30 scripts para galerias, slideshows y lightboxes

chelito

Re: 30 scripts para galerias, slideshows y lightboxes

JGuillen™

Re: 30 scripts para galerias, slideshows y lightboxes