【问题标题】:how to open JavaScript widget photos in lightbox2?如何在 lightbox2 中打开 JavaScript 小部件照片?
【发布时间】:2013-11-08 03:40:02
【问题描述】:

当我点击照片时,我有一个panaramio JavaScript widget,它在新选项卡中打开。如何在 lightbox2 中打开它?

如果你给我在博客默认灯箱中打开图像的示例代码就可以了。

这是我的代码

<script src="http://www.panoramio.com/wapi/wapi.js?v=1&hl=en" type="text/javascript"></script>
<style type="text/css">

  #div_attr_ex .panoramio-wapi-images {
    background-color: transparent;
  } 
</style>
<div id="div_attr_ex" style="float: center; margin: 5px 10px;">

<div id="photo_widget_id_b">
</div>
<div id="photo_widget_id_c">
</div>
</div>
<script type="text/javascript">
var sand = {'tag':'Saudi Arabia'};
  var sandRequest = new panoramio.PhotoRequest(sand);
  var attr_ex_list_options = {
    'width': 880,
    'height': 630,
    'columns': 4,
    'rows': 3,
    'croppedPhotos': false,
    'disableDefaultEvents': [panoramio.events.EventType.PHOTO_CLICKED],
    'orientation': panoramio.PhotoListWidgetOptions.Orientation.VERTICAL,
    'attributionStyle': panoramio.tos.Style.HIDDEN};
  var attr_ex_list_widget = new panoramio.PhotoListWidget(
    'photo_widget_id_b', sandRequest, attr_ex_list_options);

  var attr_ex_attr_options = {'width': 310};
  var attr_ex_attr_widget = new panoramio.TermsOfServiceWidget(
    'photo_widget_id_c', attr_ex_attr_options);

function MaximizeWindow(hWnd){
    hWnd.moveTo(0,0);
    hWnd.resizeTo(screen.width, screen.height);
}

  function onListPhotoClicked(event) {
  var position = event.getPosition();
var photo=event.getPhoto();

    if(photo){
        MaximizeWindow(window.open('http://static.panoramio.com/photos/large/'+photo.getPhotoId()+'.jpg'));
    }

}

panoramio.events.listen(
    attr_ex_list_widget, panoramio.events.EventType.PHOTO_CLICKED,
    function(e) { onListPhotoClicked(e); });

  attr_ex_list_widget.setPosition(0);
 attr_ex_list_widget.enablePreviousArrow(false);
  attr_ex_list_widget.enableNextArrow(false);

</script>

Its demo is here.

【问题讨论】:

    标签: javascript html widget lightbox2 panoramio


    【解决方案1】:

    我已经看到了您的链接,并且要在灯箱中打开图像,您必须更改包装图像的锚标记的 href 属性。在此处关注 jquery 灯箱教程http://leandrovieira.com/projects/jquery/lightbox/ 或者您可以在此处选择以下任何选项
    http://plugins.jquery.com/tag/lightbox/
    它简单而直接。

    【讨论】:

    • 这是我的代码,它没有锚标签 onListPhotoClicked2(event) { var position = event.getPosition(); var photo=event.getPhoto(); if(photo){ MaximizeWindow(window.open('static.panoramio.com/photos/large/…)); } } 函数最大化窗口(hWnd){ hWnd.moveTo(0,0); hWnd.resizeTo(screen.width, screen.height); } panoramio.events.listen( attr_ex_photo_widget, panoramio.events.EventType.PHOTO_CLICKED, function(e) { onListPhotoClicked2(e); });
    • 好的,所以您没有向图像添加任何锚链接。这些链接由谷歌自己添加。解决方案可能是更改所有锚标记并更改 href 属性或尝试此事件panoramio.com/api/widget/api.html#photo-object 来触发您的灯箱功能,它可能会起作用
    • 当然,会尝试,但需要您在您的网站中集成的小部件代码(您从 panoramio 下载的代码),以便我可以尝试破解问题。
    • 我的简单问题是如何通过函数调用打开灯箱?
    • 关注visuallightbox.com/rq/… 很简单。但为了进一步参考,您可能希望实现wijmo.com/topic/…
    猜你喜欢
    • 1970-01-01
    • 2020-04-24
    • 2018-04-08
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-04-22
    • 1970-01-01
    相关资源
    最近更新 更多