Entrar

Como instalar fancybox

matiasdirecto0286 · · Solicitar retirada
En esta dirección: || http://acceso-directo.net23.net/html/multimedia.html ||

Así tengo el head

<link href="../css/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript" src="../js/jquery.fancybox-1.2.4.pack.js.js"> </script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery-1.8.2.min.js"> </script>

Este link es una clase en forma de botón, y a continuación quiero usar el fancybox para mostrarlas.
<a href="#" title="Las Mejores Fotos Del 2003" class="botongris-fotos">2003</a>

Es decir, al hacer click en el año 2003 se me muestren las fotos que ya tengo preparadas en una carpeta.

Espero haber sido claro. Desde ya gracias.
matiasdirecto0286 · · Solicitar retirada
Ahora tengo esto:

Así tengo el head:

<!-- Fancybox CSS -->
<link href="../css/jquery.fancybox.css" rel="stylesheet" type="text/css" media="screen">
<link href="../css/jquery.fancybox-buttons.css" rel="stylesheet" type="text/css" media="screen">
<link href="../css/jquery.fancybox-thumbs.css" rel="stylesheet" type="text/css" media="screen">
<!-- Fancybox JS -->
<script src="../js/jquery.fancybox.js" type="text/javascript"></script>
<script src="../js/jquery.fancybox.pack.js" type="text/javascript"></script>
<script src="../js/jquery.fancybox-buttons.js" type="text/javascript"></script>
<script src="../js/jquery.fancybox-media.js" type="text/javascript"></script>
<script src="../js/jquery.fancybox-thumbs.js" type="text/javascript"></script>
<script src="../js/jquery.mousewheel-3.0.6.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>

======================================================
Y tengo este link:

<a
href="http://i1308.photobucket.com/albums/s605/AccesoDirecto2012/01.jpg";
href="http://i1308.photobucket.com/albums/s605/AccesoDirecto2012/02.jpg";
href="http://i1308.photobucket.com/albums/s605/AccesoDirecto2012/03.jpg";
href="http://i1308.photobucket.com/albums/s605/AccesoDirecto2012/04.jpg";
href="http://i1308.photobucket.com/albums/s605/AccesoDirecto2012/05.jpg";
href="http://i1308.photobucket.com/albums/s605/AccesoDirecto2012/06.jpg";
href="http://i1308.photobucket.com/albums/s605/AccesoDirecto2012/07.jpg";
href="http://i1308.photobucket.com/albums/s605/AccesoDirecto2012/08.jpg";
href="http://i1308.photobucket.com/albums/s605/AccesoDirecto2012/09.jpg";
href="http://i1308.photobucket.com/albums/s605/AccesoDirecto2012/10.jpg";
href="http://i1308.photobucket.com/albums/s605/AccesoDirecto2012/11.jpg";
href="http://i1308.photobucket.com/albums/s605/AccesoDirecto2012/12.jpg";
href="http://i1308.photobucket.com/albums/s605/AccesoDirecto2012/13.jpg";
href="http://i1308.photobucket.com/albums/s605/AccesoDirecto2012/14.jpg";
href="http://i1308.photobucket.com/albums/s605/AccesoDirecto2012/15.jpg";
href="http://i1308.photobucket.com/albums/s605/AccesoDirecto2012/16.jpg";
href="http://i1308.photobucket.com/albums/s605/AccesoDirecto2012/17.jpg";
href="http://i1308.photobucket.com/albums/s605/AccesoDirecto2012/18.jpg";
href="http://i1308.photobucket.com/albums/s605/AccesoDirecto2012/19.jpg";
href="http://i1308.photobucket.com/albums/s605/AccesoDirecto2012/20.jpg";
href="http://i1308.photobucket.com/albums/s605/AccesoDirecto2012/21.jpg";
href="http://i1308.photobucket.com/albums/s605/AccesoDirecto2012/22.jpg";
href="http://i1308.photobucket.com/albums/s605/AccesoDirecto2012/23.jpg";
href="http://i1308.photobucket.com/albums/s605/AccesoDirecto2012/24.jpg";
title="Las Mejores Fotos Del 2003"
class="fancybox"
id="botongris-fotos">2003

</a>


Si le doy click al boton 2003 aparece una imagen sola, pero tiene 23 más. Como se soluciona esto. Si lo veo como código de fuente aparece todo en rojo. Alguna solucion.
skaparate · · Solicitar retirada
Hola:

Primero que nada, no se puede definir más de un href por cada enlace, así que no funcionaría jamás :P. Segundo, Fancybox no permite mostrar una galería como lo que quieres, lo que tendrías que hacer es, en lugar de un enlace con el año, poner una especie de tabla con los enlaces de dicho año, algo así:

<div id="galeria">
  <div class="agno">
    <h3>Año 2003</h3>
    <a href="http://i1308.photobucket.com/albums/s605/AccesoDirecto2012/01.jpg" title="alguna cosa">Imagen 1</a>
    <a href="http://i1308.photobucket.com/albums/s605/AccesoDirecto2012/02.jpg" title="otra cosa">Imagen 2</a>
    <!-- Resto de los enlaces -->
  </div><!-- .agno -->
</div><!-- #galeria -->
<script>
  // Una forma sencilla de añadir la clase fancybox a todos los enlaces de la galería, aunque debe aparecer antes de que se utilice fancybox
  $('#galeria a').addClass('fancybox');
</script>

Saludos.
skaparate · · Solicitar retirada
Debe ser un enlace con una imagen, así:

<a href="enlace"><img src="ruta_imagen" /></a>

Si el plugin o es lo que buscas, entonces tendrás que buscar otro :P.
matiasdirecto0286 · · Solicitar retirada
Una pregunta de css:

http://acceso-directo.net23.net/html/multimedia.html


#fotos{
border: 1px solid #333;
float: left;
width: 425px;
height: 43%;
margin-top: 60px;
margin-left: 10px;
margin-bottom: 0px;
}

/* Links BotonGris para Fotos */
#botongris-fotos{
background: #DDD;
background: -webkit-linear-gardient(to bottom, #eeeeee, #cbcbcb);
background: -moz-linear-gardient(to bottom, #eeeeee, #cbcbcb);
background: -ms-linear-gardient(to bottom, #eeeeee, #cbcbcb);
background: -o-linear-gardient(to bottom, #eeeeee, #cbcbcb);
border: 1px solid #333;
box-shadow: 0 3 0 3px rgba(255, 255, 255, 0.3);
color: #333;
display: inline-block;
font-family: Trebuchet MS;
font-size: 16px;
font-weight: bold;
height:20px;
line-height: 20px;
margin-top: 10px;
margin-left: 11.5px;
text-align: center;
text-shadow: 0 1px 0 white;
width: 65px;


}

#botongris-fotos:hover{
background: none;
border: 1px solid #096;
box-shadow: 0 3 0 3px rgba(255, 255, 255, 0.3);
color: red;
display: inline-block;
font-family: Trebuchet MS;
font-size: 16px;
font-weight: bold;
height:20px;
line-height: 20px;
margin-top: 10px;
margin-left: 11.5px;
text-align: center;
text-shadow: 0 1px 0 white;
text-decoration: none;
width: 65px;


}
#botongris-fotos:active{
background: none;
border: 1px solid red;
box-shadow: 0 3 0 3px rgba(255, 255, 255, 0.3);
color: #009966;
display: inline-block;
font-family: Trebuchet MS;
font-size: 16px;
font-weight: bold;
height:20px;
line-height: 20px;
margin-top: 10px;
margin-left: 11.5px;
text-align: center;
text-shadow: 0 1px 0 white;
text-decoration: none;
width: 65px;


}
/* Fin de Links BotonGris para Fotos */


<section id="multimedia">
          <div id="fotos">
            <div id="botongris">

              <a ul href="#" title="Las Mejores Fotos Del 2004" id="botongris-fotos">2003</a>           
              
   </div>  
          </div>

Se puede hacer click se reubiquen los otros botones hacia abajo? Me explico