如何在灯箱中打开图像?

时间:2013-10-25 13:47:25

标签: javascript html image lightbox2 panoramio

我想使用JavaScript在this address中的灯箱中打开图像。

这个代码我在HTML中使用它工作正常。但我想在JavaScript函数中使用此代码。

<div class="imageRow"> 
     <div class="single">  
     <a href="url" rel="lightbox" title="Optional caption."><img alt="" src="url" /></a>
       </div>  
     </div>

如何用JavaScript编写。

例如这段代码在新窗口中打开一个图像。我想要这样的代码在Lightbox2中使用上层HTML代码中的类打开图像。

<script type="text/javascript">
    function onListPhotoClicked(event) {
        var position = event.getPosition();
    var photo=event.getPhoto();
        if(photo){
            MaximizeWindow(window.open('http://static.panoramio.com/photos/original/'+photo.getPhotoId()+'.jpg'));
        }
    }
    function MaximizeWindow(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) { onListPhotoClicked(e); });
</script>

此代码在新标签中打开图像。但我希望此代码在lightbox2中打开图像。

我是编程新手。请通过编写代码告诉我。 这是panoramio.com小部件的代码。

<div>
<a href=""><img border="0" height="0" src="http://3.bp.blogspot.com/-EHT3COGzPHY/UnTXKACCkMI/AAAAAAAAAuI/KXnLjT-6ovk/s1600/98289201.jpg" width="0" /></a></div>
<script src="http://www.panoramio.com/wapi/wapi.js?v=1" type="text/javascript"></script>
<style type="text/css">

  #div_attr_ex .panoramio-wapi-images {
    background-color: transparent;
  }


</style>

<br />
<div id="div_attr_ex" style="float: center; margin: 5px 10px;">
<div id="photo_widget_id_a11">
</div>
<div id="photo_widget_id_b11">
</div>
<div id="photo_widget_id_c11">
</div>
</div>
<script type="text/javascript">
  var sand = {'set': panoramio.PhotoSet.RECENT };
  var sandRequest = new panoramio.PhotoRequest(sand);
  var attr_ex_photo_options = {
    'width': 600,
    'height': 480,
    'disableDefaultEvents': [panoramio.events.EventType.PHOTO_CLICKED],
    'attributionStyle': panoramio.tos.Style.HIDDEN};
  var attr_ex_photo_widget = new panoramio.PhotoWidget(
      'photo_widget_id_a11', sandRequest, attr_ex_photo_options);

  var attr_ex_list_options = {
    'width': 600,
    'height': 110,
    'columns': 6,
    'rows': 1,
    'croppedPhotos': true,
    'disableDefaultEvents': [panoramio.events.EventType.PHOTO_CLICKED],
    'orientation': panoramio.PhotoListWidgetOptions.Orientation.HORIZONTAL,
    'attributionStyle': panoramio.tos.Style.HIDDEN};
  var attr_ex_list_widget = new panoramio.PhotoListWidget(
    'photo_widget_id_b11', sandRequest, attr_ex_list_options);

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

 function onListPhotoClicked2(event) {
    var position = event.getPosition();
var photo=event.getPhoto();
document . apple . banana . value = position;
    if(photo){
        MaximizeWindow(window.open('http://static.panoramio.com/photos/large/'+photo.getPhotoId()+'.jpg'));
    }

}
function MaximizeWindow(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); });

  function onListPhotoClicked(event) {
var position2 = attr_ex_list_widget.getPosition();
attr_ex_list_widget.setPosition(position2+1);
    var position = event.getPosition();

    if (position !== null) attr_ex_photo_widget.setPosition(position);
document . apple . banana . value = position;

}

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

  attr_ex_photo_widget.enablePreviousArrow(true);
  attr_ex_photo_widget.enableNextArrow(true);

  attr_ex_photo_widget.setPosition(0);
  attr_ex_list_widget.setPosition(0);

function increase()
{
var temp = parseInt (document . apple . banana . value);


 if (isNaN (temp))
  return; 

if (temp>=0 )
{
attr_ex_photo_widget.setPosition(temp);
attr_ex_list_widget.setPosition(temp);
document . apple . banana . value = temp; 

}
else
{
attr_ex_photo_widget.setPosition(0);
attr_ex_list_widget.setPosition(0);
document . apple . banana . value = 0;

}
}



function startDownload()
{
var photo3=attr_ex_photo_widget.getPhoto();

var url='http://static.panoramio.com/photos/original/'+photo3.getPhotoId()+'.jpg';  
window.open(url);

}

</script>

<form name="apple">
<input max="10000" maxlength="4" min="0" name="banana" size="4" type="number" />
   <input onclick="increase ();" type="button" value="View" /></form>
<button onclick="startDownload()">Download</button>

0 个答案:

没有答案