如何在lightbox2中打开JavaScript小部件照片?

时间:2013-11-08 03:40:02

标签: javascript html widget lightbox2 panoramio

当我点击新照片中打开的照片时我有一个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.

1 个答案:

答案 0 :(得分:0)

我看到你的链接并在灯箱中打开图像,你必须更改包裹图像的锚标签的href属性。在这里关注jquery灯箱教程http://leandrovieira.com/projects/jquery/lightbox/ 或者你可以在这里选择以下任何一种选择 http://plugins.jquery.com/tag/lightbox/
它简单直接。