使用onclick打开prettyPhoto库?

时间:2015-07-24 08:20:10

标签: jquery prettyphoto

我正在尝试从click事件中打开prettyPhoto。 当它是一个图像时,一切都很完美,但我需要打开一个画廊。请求帮助!

提前致谢,对不起我的英语不好!!

这是代码

HTML:

function fancybox(elem) {
    elem = jQuery(elem);
    //elem = jQuery('#gallery_one img').attr('src');

    if (!elem.data("fancybox")) {
        elem.data("fancybox", true);
        elem.prettyPhoto({
             opacity:0.80,
             default_width:500,
             default_height:344,
             theme:'light_square'
        });
        elem.prettyPhoto().trigger('click');
        alert(elem);
    }
return false; 
}

JSCode:

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://bar/foo.txt", true/*ASYNCHRONOUS*/);

/* here is registered what-to-do once xhr is 'done': 
it can happens anywhen, it is Asynchronous: */
    xhr.onload = function (e) {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          console.log(xhr.responseText);
        } else {
          console.error(xhr.statusText);
        }
      }
    };
    xhr.onerror = function (e) {
      console.error(xhr.statusText);
    };
    xhr.send(null);

1 个答案:

答案 0 :(得分:0)

JQUERY

<script type="text/javascript">

    function fancyboxmanual(elem) {
        jQuery("a[rel^='prettyPhoto']").prettyPhoto();
        elem = jQuery(elem);

        var gallery = "#" +elem.data("gallery");
        jQuery(gallery).find(".fancybox").eq(0).click();
        return false;
    }

</script>

HTML

<div class="marker point galeria" id="plaza-italia">

        <a class="manualfancybox" onclick='return fancyboxmanual(this);' data-gallery="gallery_italia" href="#nogo"> 
            <img src="mapa/referent-points/plaza-italia.jpg" width="100%"/>
        </a>

        <div id="gallery_italia" style="display:none">
            <a rel="prettyPhoto[galleryitalia]" class="fancybox" href="mapa/referent-points/plaza-italia.jpg" title="Plaza Italia">
                <img src="mapa/referent-points/plaza-italia.jpg" alt=""/>
            </a>
            <a rel="prettyPhoto[galleryitalia]" class="fancybox" href="mapa/referent-points/plaza-italia-2.jpg" title="Plaza Italia">
                <img src="mapa/referent-points/plaza-italia-2.jpg" alt=""/>
            </a>
            <a rel="prettyPhoto[galleryitalia]" class="fancybox" href="mapa/referent-points/plaza-italia-3.jpg" title="Plaza Italia">
                <img src="mapa/referent-points/plaza-italia-3.jpg" alt=""/>
            </a>
        </div>
</div>