Foros del Web » Programando para Internet » Jquery »

sobre jquery.lightbox(SOLUCIONADO)

Estas en el tema de sobre jquery.lightbox(SOLUCIONADO) en el foro de Jquery en Foros del Web. Hola. Aver si me podeis echar un cable por que voy muy perdida con esto y lo posteo aqui por que no sé si es ...
  #1 (permalink)  
Antiguo 09/04/2010, 12:04
 
Fecha de Ingreso: noviembre-2007
Mensajes: 382
Antigüedad: 17 años, 1 mes
Puntos: 16
sobre jquery.lightbox(SOLUCIONADO)

Hola.
Aver si me podeis echar un cable por que voy muy perdida con esto y lo posteo aqui por que no sé si es cosa de css o de js lo que tengo que tocar.

tengo una pantalla con un desplegable de nombres de imagenes, al clic en unaopcion sale una vista previa de la imagen y al clic en la imagen esta aumenta. Hasta aqui bien

Ahora tengo una pantalla con muchos desplegales y sus respectivas vistas previas.
clic en la primera imagen y todo bien, aumenta. pero ni la 2ª, ni las demás lo hacen, hacen un enlace normal a la imagen

yo pensaba que sería tocar el css, en lugar de id gallery que fuera class gallery, pero en el css la palabra gallery no aparece o yo me la he perdido.
y creo que no funciona porque tengo muchas ids que se llaman asi y si las cambio de nombre, en algún sitio tendre que decir que busque en todos esos nombres, pero no veo donde.

No estoy poniendo código, por que supongo que esto es conocido (no sé como no he visto a nadie que halla preguntado ya lo mismo) pero bueno, el código está aqui:
http://leandrovieira.com/projects/jquery/lightbox/
en el ejemplo de la página todas las imagenes funcionan, pero todas estan en el id gallery (ojú, lo que me repito).

Bueno, pues muchas gracias por leerme y más aún por contestarme.
buen fin de semana

Última edición por manzarinaa; 10/04/2010 a las 09:20
  #2 (permalink)  
Antiguo 10/04/2010, 02:48
Avatar de Nemutagk
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: México
Mensajes: 2.633
Antigüedad: 20 años, 8 meses
Puntos: 406
Respuesta: sobre jquery.lightbox

Hola, que tal!!!

Bueno, para poder ayudarte es necesario que publiques tu código, ya que en la forma en que lo planteas no se entiende lo que estas haciendo (se entiende el problema, pero no como tienes tu código)

Una ayuda en general es que los links a las imágenes tiene que estar en un contenedor con el ID #gallery
Código HTML:
Ver original
  1. <div id="gallery">
  2. <p><a href="urldelaimagen.jpg"><img src="urldelaimagen.jpg" alt="imagen" /></a></p>
  3. <p><a href="urldelaimagen2.jpg"><img src="urldelaimagen2.jpg" alt="imagen" /></a></p>
  4. <p><a href="urldelaimagen3.jpg"><img src="urldelaimagen3.jpg" alt="imagen" /></a></p>
  5. <p><a href="urldelaimagen4.jpg"><img src="urldelaimagen4.jpg" alt="imagen" /></a></p>
  6. <p><a href="urldelaimagen5.jpg"><img src="urldelaimagen5.jpg" alt="imagen" /></a></p>
  7. </div>

Y el Javascript tal y como esta en los ejemplos
Código Javascript:
Ver original
  1. $(document).ready(function() {
  2. $('#gallery a').lightBox();
  3. });

Nota: Tu problema no tiene nada que ver con CSS, posiblemente estas asignando mal el efecto a los links de las imágenes
__________________
Listo?, tendría que tener 60 puntos menos de IQ para considerarme listo!!!
-- Sheldon Cooper
http://twitter.com/nemutagk
PD: No contestaré temas vía mensaje personal =)

Última edición por Nemutagk; 10/04/2010 a las 02:55
  #3 (permalink)  
Antiguo 10/04/2010, 03:00
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 22 años, 10 meses
Puntos: 772
Hola manzarinaa

Muevo tu tema al foro de Frameworks desde Web general.

Saludos,
  #4 (permalink)  
Antiguo 10/04/2010, 05:26
 
Fecha de Ingreso: noviembre-2007
Mensajes: 382
Antigüedad: 17 años, 1 mes
Puntos: 16
Respuesta: sobre jquery.lightbox

Gracias por responder.
Pongo código a ver si se ve mejor.
tengo un archivo img.class.php
este genera un select con todos los nombres de las imagenes de una carpeta que viene dada en función del lugar a la que pertenecen las imagenes. categorías, contenidos, produtos,...
al seleccionar un nombre de imagen se ve una vista previa de ella

Código PHP:
$this->addFunction('vistaPrevia''select'
            
'var arx = select.options[select.selectedIndex].value;' .
            
'if (arx == "") {' .
                
'this.byId("imgId").src = "'$this->_defaultImg '";' .
                
'this.byId("imgId_link").href = "'$this->_defaultImg '";' .
            
'}' .
            
'else {' .
                
'this.byId("imgId").src = arx;' .
                
'this.byId("imgId_link").href = arx;' .
            
'}'); 
de aqui sale la ruta de la imagen y el src y el href para el enlace.
Después de tratar variables, comprobar tipos y tal... Llego a este código:

Código PHP:
$options '';
        
$oneSelected false;

        while(
$nom $media->nextFile()) {
            
$arx $media->getUrl($fileType) . '/' $nom;

            
$selected '';
            if (
$nom == $data) {
                
$selected 'selected="selected"';
                
$oneSelected true;
            }
            
            
$options .= '<option value="' $arx '"  ' $selected '>'$nom '</option>';
        }
        
        if (
$oneSelected) {
            
$options '<option value=""><t>Sense arxiu</t></option>' $options;
        }
        else {
            
$options '<option value="" selected="selected"><t>Sense arxiu</t></option>' $options;
        }
        
        if (!
$data) {
            
$data $this->_defaultImg;
        }
        else {
            
$data Media_Files::getUrl($fileType) . '/' .  $data;
        }
$html = <<<HTMLCODE
            
            <table style="width:100%; text-align:center;">
                
                <tr>
                    <td>
                        <t>Vista prèvia</t><br />
                        
                        <div id="gallery">
                        <a href="$data" id="$imgIdLink"> 
                        <img id="$imgId" name="$imgId" width="100" height="100" border="1" src="$data" />
                        </a>
                        </div>
                    </td>
                    <td style="width:100%">
                        <select id="$selectId" name="$name" size="7" style="width:90%;" onchange="$onChange">$options</select>
                    </td>
                </tr>
                <tr>
                    <td style="padding-left:20px;" colspan="3">
                        <input type="button" value="<t>Administrador Multimèdia</t>" onclick="$setType;$administrar" class="buttonsGrans"/> 
                    </td>
                </tr>
            </table>
            <script type="text/javascript">$setType;</script>
HTMLCODE;

        return 
$html
este me genera el html del select y de su su vista previa
Aqui ya tengo el div id="gallery", lo que creo que pasa, es que este código puede ser llamado una o más veces
por lo que me encuentro con que el id gallery se me repite varias veces en un mismo template.
cuando estoy con el navegador en este template la primera imagen me hace bien el efecto.
Pero cuando me voy a las demás imagenes, el enlace no hace el efecto si no que me manda a la ruta del enlace y ya está.


Por ejemplo tengo una Categoría para editar.
tengo campo título, keywords, imagen de cabecera (por que el diseño lo requiera, esto, todos los campos son generados dinamicamente), descripción de la categoría e imagen de la categoría.
la imagen de vista previa de la imagen de cabecera hace el efecto bien
pero la imagen de la categoría no.

no sé si me he explicado.
Gracias
  #5 (permalink)  
Antiguo 10/04/2010, 09:03
Avatar de Nemutagk
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: México
Mensajes: 2.633
Antigüedad: 20 años, 8 meses
Puntos: 406
Respuesta: sobre jquery.lightbox

En tu caso, si se repite el código del DIV #gallery es mejor manejarlo como clase, recuerda que la etiqueta ID de cualquier elemento HTML se utiliza para aislarlo de cualquier otro elemento, por lo cual el ID tiene que ser único, en este caso como no es único es necesario utilizarlo como clase, tal y como se hace con los selectores CSS....

Esto se solvente de la siguiente manera....
Código PHP:
Ver original
  1. //En tu código PHP que publicaste cambia...
  2. $html = <<<HTMLCODE
  3.              
  4.             <table style="width:100%; text-align:center;">
  5.                  
  6.                 <tr>
  7.                     <td>
  8.                         <t>Vista prèvia</t><br />
  9.                          
  10.                         <div id="gallery"> //Cambia id por class
  11.                         <a href="$data" id="$imgIdLink">  
  12.                         <img id="$imgId" name="$imgId" width="100" height="100" border="1" src="$data" />
  13.                         </a>
  14.                         </div>
  15.                     </td>
  16.                     <td style="width:100%">
  17.                         <select id="$selectId" name="$name" size="7" style="width:90%;" onchange="$onChange">$options</select>
  18.                     </td>
  19.                 </tr>
  20.                 <tr>
  21.                     <td style="padding-left:20px;" colspan="3">
  22.                         <input type="button" value="<t>Administrador Multimèdia</t>" onclick="$setType;$administrar" class="buttonsGrans"/>  
  23.                     </td>
  24.                 </tr>
  25.             </table>
  26.             <script type="text/javascript">$setType;</script>
  27. HTMLCODE;
  28.  
  29. //por...
  30. $html = <<<HTMLCODE
  31.              
  32.             <table style="width:100%; text-align:center;">
  33.                  
  34.                 <tr>
  35.                     <td>
  36.                         <t>Vista prèvia</t><br />
  37.                          
  38.                         <div class="gallery"> //Tal y como esta aquí
  39.                         <a href="$data" id="$imgIdLink">  
  40.                         <img id="$imgId" name="$imgId" width="100" height="100" border="1" src="$data" />
  41.                         </a>
  42.                         </div>
  43.                     </td>
  44.                     <td style="width:100%">
  45.                         <select id="$selectId" name="$name" size="7" style="width:90%;" onchange="$onChange">$options</select>
  46.                     </td>
  47.                 </tr>
  48.                 <tr>
  49.                     <td style="padding-left:20px;" colspan="3">
  50.                         <input type="button" value="<t>Administrador Multimèdia</t>" onclick="$setType;$administrar" class="buttonsGrans"/>  
  51.                     </td>
  52.                 </tr>
  53.             </table>
  54.             <script type="text/javascript">$setType;</script>
  55. HTMLCODE;

Y en tu código JS...
Código Javascript:
Ver original
  1. $('.gallery a').lightBox();
__________________
Listo?, tendría que tener 60 puntos menos de IQ para considerarme listo!!!
-- Sheldon Cooper
http://twitter.com/nemutagk
PD: No contestaré temas vía mensaje personal =)
  #6 (permalink)  
Antiguo 10/04/2010, 09:19
 
Fecha de Ingreso: noviembre-2007
Mensajes: 382
Antigüedad: 17 años, 1 mes
Puntos: 16
Respuesta: sobre jquery.lightbox

funciona perfectamente como has dicho.

Yo ya estaba preparando un pollo de gallery1, gallery2,....galleryx XDD.
Muchas gracias
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 17:46.