how to open a image in lightbox?

问题

I want to open a image in lightbox like in this address using JavaScript.

this code i am using in HTML it works fine. but i want to use this code in JavaScript function.

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

How to write it in JavaScript.

for example this code open a image in new window.i want code like this to open a image in Lightbox2 using classes that are in upper HTML code.

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

this code open a image in new tab.but i want that this code open image in lightbox2.

i am new in programming.please tell me in detail by writing code. this is code of a panoramio.com widget.

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

来源：https://stackoverflow.com/questions/19591619/how-to-open-a-image-in-lightbox

标签

javascript

html

image

lightbox2

panoramio