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

[jesusbc]

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