Plugins y técnicas jQuery para crear efectos con imágenes

jesusbc · #1 (**permalink**) 29/10/2011, 07:12

Hola a todos,

antes de nada, no soy programador, y ando de cabeza con un jQuery, os cuento:

tengo un listado con pequeñas imágenes, al apretar sobre una
cualquiera se abre la imagen en grande y puedo manejarla ampliándola y
arrastrandola con el ratón para ver detalle ampliado, muestro código
con el que estoy trabajando en el siguiente link:

[URL="https://github.com/can3p/iviewer/blob/master/test/lightbox/main.js"]https://github.com/can3p/iviewer/blob/master/test/lightbox/main.js[/URL]

Mi problema es que cuando apreto sobre otra imagen, se vuelve a cargar
la primera que apreté. Intuyo que la cuestión está en este trozo de
código:

$('#go').click(function(e) {
e.preventDefault();
var src = $(this).attr('href');
open(src);
});

si duplico y pongo y coloco a continuación:

$('#go_2').click(function(e) {
e.preventDefault();
var src = $(this).attr('href');
open(src);
});

funciona siempre y cuando no haya apretado una imagen con
anterioridad. Entiendo que la función ya ha sido ejecutada una vez y
que se ha quedado con el #go...

he intentado poner return null... pero no acabo de ubicarlo bien, o
tal vez no vaya por aquí.

muchas gracias de antemano,

jesus

Alun · #2 (**permalink**) 29/10/2011, 08:42

Hola:

No estoy seguro, porque no he visto tu html, pero me da que tienes el ID de cada imagen repetido (<img id="GO"> en todos). Prueba a sustituir el ID de cada imagen por uno diferente (<img id="GO1, GO2....">), y ponerle la clase GO (<img class="GO">). Luego, sustituye en el javascript el selector de jquery así:

$(".GO").click(function(){
//tu función;
});

jesusbc · #3 (**permalink**) 01/11/2011, 14:24

Hola Alun,

agradecido por tu respuesta, no lo he hecho antes porque he estado fuera unos días y he desconectado.

Según el html del tutorial el id se pone en el enlace, te muestro el código del tutorial:

<body>
<a id="go" href="../test_image.jpg">Show lightbox!</a>

<div id="iviewer">
<div class="loader"></div>

<div class="viewer"></div>

<ul class="controls">
<li class="close"></li>
<li class="zoomin"></li>
<li class="zoomout"></li>
</ul>

<p class="info">
Use your scrollwheel or the zoom buttons to zoom in/out.
Click and drag to view other parts of the image when zoomed.
</p>
</div>

<script type="text/javascript" src="../jquery.js" ></script>
<script type="text/javascript" src="../jqueryui.js" ></script>
<script type="text/javascript" src="../jquery.mousewheel.min.js" ></script>
<script type="text/javascript" src="../../jquery.iviewer.js" ></script>
<script src="main.js"></script>
</body>

y ahora te muestro el mío:

<ul class="quadres">
<li><a id="go1" href="img/quadres/tela/composicio2.jpg"><img src="img/quadres/tela/composicio1.jpg" alt="Composició" /></a></li>
<li><a id="go2" href="img/quadres/tela/palamos2.jpg"><img src="img/quadres/tela/palamos1.jpg" alt="Palamós" /></a></li>
</ul>

entonces en main.js te muestro el código original donde pienso está el kit:

$('#go').click(function(e) {
e.preventDefault();
var src = $(this).attr('href');
open(src);
});

y lo que he hecho yo:

$('#go1').click(function(e) {
e.preventDefault();
var src = $(this).attr('href');
open(src);
});

$('#go2').click(function(e) {
e.preventDefault();
var src = $(this).attr('href');
open(src);
});

pero claro, si tengo que hacerlo con 149 imágenes no creo que sea óptimo.

muchas gracias por la ayuda,

jesus

Alun · #4 (**permalink**) 02/11/2011, 15:02

Hola de nuevo, Jesús:

Ya se qué plugin es ese, estoy ahora mismo trabajando con uno igual, Fancybox, no se si lo conocerás.

Lo que yo hago es generar las etiquetas IMG mediante PHP, añadiéndole un ID, por supuesto, pero además, agregándole una clase igual a todas las fotos, quedándome algo así:

Código HTML:

Ver original<a class="galery" href="images/image1.jpg"><img src="images/thumbs/image1.jpg" id="image1"></a>
 <a class="galery" href="images/image2.jpg"><img src="images/thumbs/image2.jpg" id="image2"></a>

Luego lo tienes más fácil para aplicarles el efecto jquery, en lugar de aplicar el efecto individualmente a cada link, lo haces con todos de una vez, de esta forma:

Código Javascript:

Ver original$("a.galery").click(function(evt){
  evt.preventDefault();
  var src = $(this).attr("href");
  open(src);
 });

La idea es simplificarlo, no tienes por qué aplicarle la misma función individualmente a cada una de las 149 imágenes con sus respectivos links, sino aplicársela a una clase, así, puedes añadir o eliminar fotos sin tener que tocar el código, ya que lo aplicará al número exacto de imágenes que haya.

El php para generar las imágenes es algo así:

Código PHP:

Ver original$path = 'img/images/thumbs';
 $opendir = opendir($path) or die ('No se `ha encontrado el directorio');
 
 while($file = readdir($opendir)){
  /*hay que comprobar que no se tomen los directorios padre, raiz y el
  archivo db si usas windows, o los archivos que tengas y no quieras mostrar*/
  if($file == '.' || $file == '..' || $file == 'Thumbs.db'){continue;}
  /*Por cada imagen contenida en el directorio, haces un echo
  asignándole la misma clase a todas, y de ID el nombre del archivo.
  Igualmente, el ID no es necesario ponerlo, ya que, para simplificar,
  vas a tomar el selector CLASS con jquery.*/
  echo "<a class=\"galery\" href=\"{$path}/{$file}\">
        <img src=\"{$path}/{$file}\" id=\"{$file}\">
        </a>\n";
 }

Si quieres un enlace a la web del plugin que uso yo, que, por lo que veo, trabaja igual que el tuyo, es este:

http://fancybox.net/

Espero que esto solucione tu problemilla y te ahorre código. Suerte!!

jesusbc · #5 (**permalink**) 05/11/2011, 07:16

hola Alun,

gracias de nuevo por la ayuda, no creo que me meta con PHP, no tengo los conocimientos (soy diseñador gráfico, HTML y CSS), sería durillo para mí actualmente, además ya tengo creado todo el HTML.

He probado esto que me has dicho, de poner la misma clase al enlace, entiendo que entonces no debo poner un ID para los thumbs, que esto sería si utilizara PHP.

Me sigue pasando lo mismo, apreto el primer thumb y se abre la primera imagen en grande, y puedo hacer el zoom in y el zoom out, arrastrarla, todo bien... pero cuando apreto el segundo thumb, se me vuelve a abrir la primera imagen ampliada...no lo entiendo.

HTML:

Código:

<ul class="quadres">
<li><a class="go" href="img/quadres/tela/composicio2.jpg"><img src="img/quadres/tela/composicio1.jpg" alt="Composició" /></a></li>
<li><a class="go" href="img/quadres/tela/palamos2.jpg"><img src="img/quadres/tela/palamos1.jpg" alt="Palamós" /></a></li>
</ul>

y en main.js lo dejo así:

Código:

(function($) {
    function open(src) {
        var firstZoom = true;

        $("#iviewer").fadeIn().trigger('fadein');

        var viewer = $("#iviewer .viewer").
            width($(window).width() - 80).
            height($(window).height()).
            iviewer({
                src : src,
                ui_disabled : true,
                zoom : 'fit',
                initCallback : function() {
                    var self = this;

                },
                onZoom : function() {
                    if (!firstZoom) return;

                    $("#iviewer .loader").fadeOut();
                    $("#iviewer .viewer").fadeIn();
                    firstZoom = true;
                }
            }
        );

        $("#iviewer .zoomin").click(function(e) {
            e.preventDefault();
            viewer.iviewer('zoom_by', 1);
        });

        $("#iviewer .zoomout").click(function(e) {
            e.preventDefault();
            viewer.iviewer('zoom_by', -1);
        });
    }

    function close() {
        $("#iviewer").fadeOut().trigger('fadeout');
    }

    $('a.go').click(function(e) {
        e.preventDefault();
        var src = $(this).attr('href');
        open(src);
    });

    $("#iviewer .close").click(function(e) {
        e.preventDefault();
        close();
    });

    $("#iviewer").bind('fadein', function() {
        $(window).keydown(function(e) {
            if (e.which == 27) close();
        });
    });
})(jQuery);

tal vez la historia este en los otros .js??

Código:

<script type="text/javascript" src="jquery.js" ></script>
<script type="text/javascript" src="jqueryui.js" ></script>
<script type="text/javascript" src="jquery.mousewheel.min.js" ></script>
<script type="text/javascript" src="jquery.iviewer.js" ></script>
<script src="main.js"></script>

muchas gracias Alun,

jesus

chicohot20 · #6 (**permalink**) 05/11/2011, 09:25

El iviewer no tiene implementado correctamente el destroy()
en main.js el close() debe ir asi:

Código Javascript:

Ver originalfunction close() {
        $("#iviewer").fadeOut().trigger('fadeout');
         $("#iviewer .viewer").iviewer("destroy");
    }

y en jquery.iviewer.js el destroy() debe ir así:

Código Javascript:

Ver originaldestroy: function() {
        this._mouseDestroy();
        $(this.element).html("");
        $.Widget.prototype.destroy.call(this);
 
    },

busca el destroy() ya esta declarado solo agregale unas lineas de codigo.

jesusbc · #7 (**permalink**) 06/11/2011, 05:08

Hola chicohot20,

funciona perfectamente!!

muchas gracias!!

SALUDos,

jesus