0

我想使用 JavaScript在此地址中的灯箱中打开图像。

我在 HTML 中使用的这段代码运行良好。但我想在 JavaScript 函数中使用这段代码。

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

如何用 JavaScript 编写它。

例如，此代码在新窗口中打开图像。我希望这样的代码使用上层 HTML 代码中的类在 Lightbox2 中打开图像。

<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>
4

0 回答 0