Foros del Web » Programando para Internet » Jquery »

Slider y Lightbox en un mismo documento .html

Estas en el tema de Slider y Lightbox en un mismo documento .html en el foro de Jquery en Foros del Web. Hola, mi principal problema es que no soy diseñador web, aunque si que puedo mas o menos construir una web por medio de divs y ...
  #1 (permalink)  
Antiguo 02/02/2014, 11:34
 
Fecha de Ingreso: noviembre-2011
Mensajes: 15
Antigüedad: 13 años
Puntos: 0
Pregunta Slider y Lightbox en un mismo documento .html

Hola, mi principal problema es que no soy diseñador web, aunque si que puedo mas o menos construir una web por medio de divs y css, los obstáculos "insalvables" que me encuentro son a la hora de utilizar jQuery o Javascript.
Tengo una web casi terminada y en ella quisiera incluir una página con una galería con el efecto Lightbox, pero cuando intento hacer esto no funciona ya que hay un Slider común a todas las páginas y, o funciona el slider o funciona la galeria, pero ambas en un mismo documento no.
Decir que ya que no se programar jQuery lo que he hecho es bajarme un Slider (concretamente el Nivo Slider) y una galería con el efecto Lightbox, que son las que intento poner en mi página. Llevo dos semanas tratando de hacerlo funcionar sin éxito, así que me he decidido a buscar ayuda.
No se si infrinjo alguna regla del foro preguntando esto, no es mi intención, pero ¿podría enviar a alguien estos dos documentos y que me explicara como se pueden poner?

Muchas gracias.
  #2 (permalink)  
Antiguo 03/02/2014, 07:48
Avatar de jonni09lo
Colaborador
 
Fecha de Ingreso: septiembre-2011
Ubicación: Estigia
Mensajes: 1.471
Antigüedad: 13 años, 3 meses
Puntos: 397
Respuesta: Slider y Lightbox en un mismo documento .html

Pues el primer paso es decirnos que galerías estás usando, ya nos comentaste de una (Nivo Slider), cual es la otra?

Adicional a ello sería bueno que publicases el código que estás usando, de esa manera es mas sencillo poder ubicar el posible error.

Saludos
__________________
Haz preguntas inteligentes-Como ser Hacker
No hacer preguntas por mensaje privado. No sólo no es inteligente sino que es egoísta.
  #3 (permalink)  
Antiguo 03/02/2014, 09:53
 
Fecha de Ingreso: noviembre-2011
Mensajes: 15
Antigüedad: 13 años
Puntos: 0
Respuesta: Slider y Lightbox en un mismo documento .html

Ok muchas gracias por tu ayuda. Verás la galería con efecto Lightbox, la verdad es que no recuerdo de donde la baje, porque he probado mogollón (resultado de mi torpeza) El código que genera en Dreamwever es:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery lightBox plugin</title>

<link rel="stylesheet" type="text/css" href="../style-projects-jquery.css" />

<!-- Arquivos utilizados pelo jQuery lightBox plugin -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<!-- / fim dos arquivos utilizados pelo jQuery lightBox plugin -->

<!-- Ativando o jQuery lightBox plugin -->
<script type="text/javascript">
$(function() {
$('#gallery a').lightBox();
});
</script>
<style type="text/css">
/* jQuery lightBox plugin - Gallery style */
#gallery {
background-color: #444;
padding: 10px;
width: 520px;
}
#gallery ul { list-style: none; }
#gallery ul li { display: inline; }
#gallery ul img {
border: 5px solid #3e3e3e;
border-width: 5px 5px 20px;
}
#gallery ul a:hover img {
border: 5px solid #fff;
border-width: 5px 5px 20px;
color: #fff;
}
#gallery ul a:hover { color: #fff; }
</style>
</head>

<body>

<h2 id="example">&nbsp;</h2>
<div id="gallery">
<ul>
<li>
<a href="photos/image1.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery').lightBox();">
<img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
</a>
</li>
<li>
<a href="photos/image2.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
<img src="photos/thumb_image2.jpg" width="72" height="72" alt="" />
</a>
</li>
<li>
<a href="photos/image3.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
<img src="photos/thumb_image3.jpg" width="72" height="72" alt="" />
</a>
</li>
<li>
<a href="photos/image4.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
<img src="photos/thumb_image4.jpg" width="72" height="72" alt="" />
</a>
</li>
<li>
<a href="photos/image5.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
<img src="photos/thumb_image5.jpg" width="72" height="72" alt="" />
</a>
</li>
</ul>
</div>

</body>
</html>

Así mismo el código del slider es:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html lang="en">
<head>
<title>Nivo Slider Demo</title>
<link rel="stylesheet" href="../themes/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../themes/light/light.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../themes/dark/dark.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../themes/bar/bar.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper">
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="images/toystory.jpg" data-thumb="images/toystory.jpg" alt="" />
<a href="http://dev7studios.com"><img src="images/up.jpg" data-thumb="images/up.jpg" alt="" title="This is an example of a caption" /></a>
<img src="images/walle.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" />
<img src="images/nemo.jpg" data-thumb="images/nemo.jpg" alt="" title="#htmlcaption" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>
</div>

</div>
<script type="text/javascript" src="scripts/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="../jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
</body>
</html>

Por último adjunto la hoja de estilos del Nivo Slider:
/*=================================*/
/* Nivo Slider Demo
/* November 2010
/* By: Gilbert Pellegrom
/* http://dev7studios.com
/*=================================*/

/*====================*/
/*=== Reset Styles ===*/
/*====================*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin:0;
padding:0;
border:0;
outline:0;
font-weight:inherit;
font-style:inherit;
font-size:100%;
font-family:inherit;
vertical-align:baseline;
}
body {
line-height:1;
color:black;
background:white;
}
table {
border-collapse:separate;
border-spacing:0;
}
caption, th, td {
text-align:left;
font-weight:normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:"";
}
blockquote, q {
quotes:"" "";
}
/* HTML5 tags */
header, section, footer,
aside, nav, article, figure {
display: block;
}

/*===================*/
/*=== Main Styles ===*/
/*===================*/
body {
font:14px/1.6 Georgia, Palatino, Palatino Linotype, Times, Times New Roman, serif;
color:#333;
background:#eee;
}

a, a:visited {
color:blue;
text-decoration:none;
}
a:hover, a:active {
color:#000;
text-decoration:none;
}

#dev7link {
position:absolute;
top:0;
left:50px;
background:url(images/dev7logo.png) no-repeat;
width:60px;
height:67px;
border:0;
display:block;
text-indent:-9999px;
}

.slider-wrapper {
width: 80%;
margin: 100px auto;
}

/*====================*/
/*=== Other Styles ===*/
/*====================*/
.clear {
clear:both;
}

Si puedo aportar más información para solucionar el problema dime y una vez más muchas gracias.
  #4 (permalink)  
Antiguo 03/02/2014, 13:23
Avatar de jonni09lo
Colaborador
 
Fecha de Ingreso: septiembre-2011
Ubicación: Estigia
Mensajes: 1.471
Antigüedad: 13 años, 3 meses
Puntos: 397
Respuesta: Slider y Lightbox en un mismo documento .html

Como tratas de usar los dos plugins a la vez?

Saludos
__________________
Haz preguntas inteligentes-Como ser Hacker
No hacer preguntas por mensaje privado. No sólo no es inteligente sino que es egoísta.
  #5 (permalink)  
Antiguo 03/02/2014, 14:18
 
Fecha de Ingreso: noviembre-2011
Mensajes: 15
Antigüedad: 13 años
Puntos: 0
Respuesta: Slider y Lightbox en un mismo documento .html

El Nivo Slider es un slider que está constantemente mostrando cinco imágenes que van rotando, debajo del slider están los botones del menú, todas las páginas a las que accedes en la web tienen arriba el slider y mi problema es que en la página en la que hay una galería no soy capaz de que funcionen ambas aplicaciones o plugins. Te envío esta página en la que se ve lo que quiero hacer: http://www.pagansmind.com/gallery/studio-photos/#prettyPhoto
Aquí se puede ver un slider arriba funcionando y a la vez una galeria con efecto Lightbox abajo.
  #6 (permalink)  
Antiguo 03/02/2014, 14:25
Avatar de jonni09lo
Colaborador
 
Fecha de Ingreso: septiembre-2011
Ubicación: Estigia
Mensajes: 1.471
Antigüedad: 13 años, 3 meses
Puntos: 397
Respuesta: Slider y Lightbox en un mismo documento .html

si, yo entiendo perfectamente lo que deseas hacer, pero el asunto es como lo has tratado de hacer? No me sirve de nada que me muestres los códigos por separado ya que me has dicho que funcionan, por ende el error que cometes es a la hora de realizar la implementación de ambos códigos en la misma página. Por favor postea lo que has tratado de hacer.

PD: Usa el select que aparece en la parte superior derecha de la caja donde escribes el mensaje llamado Highlight, sirve para encerrar el código y lo resalte.

Saludos
__________________
Haz preguntas inteligentes-Como ser Hacker
No hacer preguntas por mensaje privado. No sólo no es inteligente sino que es egoísta.
  #7 (permalink)  
Antiguo 04/02/2014, 01:22
 
Fecha de Ingreso: noviembre-2011
Mensajes: 15
Antigüedad: 13 años
Puntos: 0
Respuesta: Slider y Lightbox en un mismo documento .html

Esto es lo que he conseguido hasta el momento, se abren las imagenes sin el efecto lightbox y además en la misma ventana. Por otra parte, ambos plugins venian con su propia carpeta de "images" asi que he puesto todas la imagenes en la carpeta "images" de nivo slider, indicandoles la nueva ruta a las imagenes de la galeria.

Código HTML:
Ver original
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  3. <html lang="en">
  4.     <title>Nivo Slider Demo</title>
  5.     <link rel="stylesheet" type="text/css" href="../style-projects-jquery.css" />
  6.    
  7.     <link rel="stylesheet" href="../themes/default/default.css" type="text/css" media="screen" />
  8.     <link rel="stylesheet" href="../themes/light/light.css" type="text/css" media="screen" />
  9.     <link rel="stylesheet" href="../themes/dark/dark.css" type="text/css" media="screen" />
  10.     <link rel="stylesheet" href="../themes/bar/bar.css" type="text/css" media="screen" />
  11.     <link rel="stylesheet" href="../nivo-slider.css" type="text/css" media="screen" />
  12.     <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
  13.    
  14.     <!-- Arquivos utilizados pelo jQuery lightBox plugin -->
  15.     <script type="text/javascript" src="js/jquery.js"></script>
  16.     <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
  17.     <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
  18.     <!-- / fim dos arquivos utilizados pelo jQuery lightBox plugin -->
  19.    
  20.     <!-- Ativando o jQuery lightBox plugin -->
  21.     <script type="text/javascript">
  22.     $(function() {
  23.         $('#gallery a').lightBox();
  24.     });
  25.     </script>
  26.     <style type="text/css">
  27.     /* jQuery lightBox plugin - Gallery style */
  28.     #gallery {
  29.         background-color: #444;
  30.         padding: 10px;
  31.         width: 520px;
  32.     }
  33.     #gallery ul { list-style: none; }
  34.     #gallery ul li { display: inline; }
  35.     #gallery ul img {
  36.         border: 5px solid #3e3e3e;
  37.         border-width: 5px 5px 20px;
  38.     }
  39.     #gallery ul a:hover img {
  40.         border: 5px solid #fff;
  41.         border-width: 5px 5px 20px;
  42.         color: #fff;
  43.     }
  44.     #gallery ul a:hover { color: #fff; }
  45.     </style>
  46. </head>
  47.     <div id="wrapper">
  48.       <div class="slider-wrapper theme-default">
  49.       <div id="slider" class="nivoSlider">
  50.                 <img src="images/toystory.jpg" data-thumb="images/toystory.jpg" alt="" />
  51.                 <a href="http://dev7studios.com"><img src="images/up.jpg" data-thumb="images/up.jpg" alt="" title="This is an example of a caption" /></a>
  52.                 <img src="images/walle.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" />
  53.                 <img src="images/nemo.jpg" data-thumb="images/nemo.jpg" alt="" title="#htmlcaption" />
  54.             </div>
  55.             <div id="htmlcaption" class="nivo-html-caption">
  56.                 <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
  57.             </div>
  58.         </div>
  59.  
  60.     </div>
  61.    
  62.     <div id="gallery">
  63.   <ul>
  64.         <li>
  65.             <a href="images/image1.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery').lightBox();">
  66.                 <img src="images/thumb_image1.jpg" width="72" height="72" alt="" />
  67.             </a>
  68.         </li>
  69.         <li>
  70.             <a href="images/image2.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
  71.                 <img src="images/thumb_image2.jpg" width="72" height="72" alt="" />
  72.             </a>
  73.         </li>
  74.         <li>
  75.             <a href="images/image3.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
  76.                 <img src="images/thumb_image3.jpg" width="72" height="72" alt="" />
  77.             </a>
  78.         </li>
  79.         <li>
  80.             <a href="images/image4.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
  81.                 <img src="images/thumb_image4.jpg" width="72" height="72" alt="" />
  82.             </a>
  83.         </li>
  84.         <li>
  85.             <a href="images/image5.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
  86.                 <img src="images/thumb_image5.jpg" width="72" height="72" alt="" />
  87.             </a>
  88.         </li>
  89.     </ul>
  90. </div>
  91. <script type="text/javascript" src="scripts/jquery-1.9.0.min.js"></script>
  92.     <script type="text/javascript" src="../jquery.nivo.slider.js"></script>
  93.     <script type="text/javascript">
  94.     $(window).load(function() {
  95.         $('#slider').nivoSlider();
  96.     });
  97.     </script>
  98. </body>
  99. </html>
  #8 (permalink)  
Antiguo 04/02/2014, 08:43
Avatar de jonni09lo
Colaborador
 
Fecha de Ingreso: septiembre-2011
Ubicación: Estigia
Mensajes: 1.471
Antigüedad: 13 años, 3 meses
Puntos: 397
Respuesta: Slider y Lightbox en un mismo documento .html

Estás incluyendo dos veces la librería de jQuery, en el head y antes de finalizar el body. Elimina la última que se incluye y prueba de nuevo.

Saludos
__________________
Haz preguntas inteligentes-Como ser Hacker
No hacer preguntas por mensaje privado. No sólo no es inteligente sino que es egoísta.
  #9 (permalink)  
Antiguo 04/02/2014, 09:53
 
Fecha de Ingreso: noviembre-2011
Mensajes: 15
Antigüedad: 13 años
Puntos: 0
Respuesta: Slider y Lightbox en un mismo documento .html

Nada, no lo consigo. Es muy posible que la este liando con como tengo organizado el sitio, te envio dos imagenes en el que se ven la carpeta de Lightbox y la de Nivo Slider. Supongo que lo suyo sería que estuvieran los documentos lightbox.html y demo.html en una misma carpeta, asi como las imagenes estan en una misma carpeta. Pero esto supondría que los archivos .js y .css no funcionaran, que creo que es lo que sucede ahora al menos en parte.




Etiquetas: lightbox, slider
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 12:15.