jQuery Resize Plugin apply to <a>

为君一笑 提交于 2019-12-11 11:56:52

问题


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.



来源:https://stackoverflow.com/questions/16275824/jquery-resize-plugin-apply-to-a

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!