Galleria jquery 插件

发布于 2024-09-24 08:41:11 字数 796 浏览 0 评论 0原文

这是流行的 jquery 插件 galleria 的主页。我需要将下载链接插入到活动图像的右下角。现在有可用的统计数据，如 (3/10)，它表示列表中的当前数字。也许有人已经这样做了。最快的方法是什么？

UPD：使用gearsdigital的想法我编写了代码：

var gallery = Galleria.get(0);

gallery.bind(Galleria.IMAGE, function(e) {
    imgHandle = e.imageTarget;
    console.log(imgHandle);
    console.log(imgHandle.attr('href'));
    //$('.galleria-counter').append('<a href="'+imgHandle.attr('src')+'">Download</a>');
});

第一个日志行显示如下：

<img width="584" height="438" src="http://....jpg" style="display: block; position: relative; left: 0px; top: -4px; opacity: 1;">

但是如何获取src位置，我看到了的错误attr 功能不可用。

原文

Here is the home page for the popular jquery-plugin galleria. I need to insert the download link to the right bottom corner for the active image. Now there is available statistic like (3/10), which indicates the current number from list.
Maybe someone already did this. What is the fastest way?

UPD: using the gearsdigital's idea I wrote the code:

var gallery = Galleria.get(0);

gallery.bind(Galleria.IMAGE, function(e) {
    imgHandle = e.imageTarget;
    console.log(imgHandle);
    console.log(imgHandle.attr('href'));
    //$('.galleria-counter').append('<a href="'+imgHandle.attr('src')+'">Download</a>');
});

The first log line shows up something like:

<img width="584" height="438" src="http://....jpg" style="display: block; position: relative; left: 0px; top: -4px; opacity: 1;">

But how to get the src location, I see the error that attr function isn't available.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一张白纸 2024-10-01 08:41:11

您从 DOMEvent 获取 imgHandle，而不是 jquery 对象。

由于 attr 是 jQuery 对象的一部分，因此您需要将 dom 对象传输到 jquery 对象。

gallery.bind(Galleria.IMAGE, function(e) {
    imgHandle = $(e.imageTarget); //Wrap it here

   alert(imghandle.attr('href'))

    //$('.galleria-counter').append('<a href="'+imgHandle.attr('src')+'">Download</a>');
});

your getting the imgHandle from a DOMEvent, not a jquery object.

As attr is part of the jQuery object you need to transfer the dom object to a jquery object.

gallery.bind(Galleria.IMAGE, function(e) {
    imgHandle = $(e.imageTarget); //Wrap it here

   alert(imghandle.attr('href'))

    //$('.galleria-counter').append('<a href="'+imgHandle.attr('src')+'">Download</a>');
});

回复收藏 0 原文

拿命拼未来 2024-10-01 08:41:11

我会尝试从当前图像中获取当前的源属性并将其附加为链接。

//Untested. This is just a suggestion :)
currentImageSource = $('.galleria-image img').attr('src');  
$('.galleria-counter').append('<a href="'+currentImageSource+'">Download</a>');

但这样的链接会单独打开图像，而不是普通下载。如果您想要“真正的”下载，您必须将此图像放入 zip 存档中。

$('.galleria-counter').append('<a href="'+currentImageSource+'.zip">Download</a>');

这将产生类似的内容： http://www.example.com/galleria/img/mygreatimage.jpg.zip

对我有用：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Example</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

        <script type="text/javascript">
            $(document).ready(function() {

                currentImageSource = $('.container img').attr('src');  
                $('.placeholder').append('<a href="'+currentImageSource+'">Download</a>');

            });

        </script>
    </head>

    <body>
        <div class="container">
            <h2>Get img src</h2>
            <img src="http://www.duba.at/wp-content/uploads/2007/08/bild_0570000.jpg" witdh="200" height="220"/>
        </div>

        <div class="placeholder">
            <h2>Append Here</h2>
        </div>

    </body>
</html>

I would try to get the current Source-Attribute from the current image and append this as link.

//Untested. This is just a suggestion :)
currentImageSource = $('.galleria-image img').attr('src');  
$('.galleria-counter').append('<a href="'+currentImageSource+'">Download</a>');

But a link like this will open the image separatly and not download ordinary. If you want a "real" Download you have to put this image in an zip archive.

$('.galleria-counter').append('<a href="'+currentImageSource+'.zip">Download</a>');

This will produce something like that: http://www.example.com/galleria/img/mygreatimage.jpg.zip

Works for me:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Example</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

        <script type="text/javascript">
            $(document).ready(function() {

                currentImageSource = $('.container img').attr('src');  
                $('.placeholder').append('<a href="'+currentImageSource+'">Download</a>');

            });

        </script>
    </head>

    <body>
        <div class="container">
            <h2>Get img src</h2>
            <img src="http://www.duba.at/wp-content/uploads/2007/08/bild_0570000.jpg" witdh="200" height="220"/>
        </div>

        <div class="placeholder">
            <h2>Append Here</h2>
        </div>

    </body>
</html>

回复收藏 0 原文

~没有更多了~