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