jQuery Resize Plugin apply to

问题:

I'm usign jQuery resize plugin Plugin here, it work's as it should on images.

But I'm trying to apply it to the gallery Galleriffic

The problem is that the main image is wraped in <a> and when I add a class to the <a> tag the resize don't work.

Any suggestions?

Here is my markup:

<li>
<a class="thumb resize2" name="imagen1" href="images/400x400-1.jpg" title="imagen1">
<img class="resize1" src="images/400x400-1.jpg" alt="Title #0" />
</a>
</li>
<li>
<a class="thumb resize2" name="drop" href="http://farm3.static.flickr.com/2404/2538171134_2f77bc00d9.jpg" title="Title #1">
<img class="resize1" src="http://farm3.static.flickr.com/2404/2538171134_2f77bc00d9_s.jpg" alt="Title #1" />
</a>
<div class="caption">
Any html can be placed here ...
</div>
</li>

Here's the script:

<script>
$(function() {
    $( ".resize1" ).aeImageResize({ height: 70, width: 70 });
    $( ".resize2" ).aeImageResize({ height: 10, width: 10 });
});
</script>

The resize script is perfect, but I need it to funcion on <a>

P.D. I'm begginer in jQuery and scripting in general.

UPDATE: Here is screenshot how it is shown in browser:

Here is a fraction from galleriffic.js file

var newSlide = this.$imageContainer
                    .append('<span class="image-wrapper current"><a class="advance-link" rel="history" href="#'+this.data[nextIndex].hash+'" title="'+imageData.title+'">&nbsp;</a></span>')
                    .find('span.current').css('opacity', '0');

                newSlide.find('a')
                    .append(imageData.image)
                    .click(function(e) {
                        gallery.clickHandler(e, this);
                    });

It ads advance-link class.

The question is: How can I add a class to the image in advance class container? I hope I've expressed myself correctly.

Thank you,

回答1:

Selecting the current displayed image can be achieved like this (there is only one image in the slideshow at a given time):

$("div#slideshow img")

But in order to change the gallery "main" image's size, you need to set the width and height also for the following elements:

$("div#slideshow a.advance-link")
// and also the parent element of $("div#slideshow") which I can't see in the screenshot you attached.

Adding "resize" functionality to the < a > elements the gallery is built from will not affect the gallery image.