Pergunta

i have a panaramio JavaScript widget when i click on photo it open in new tab.how to open it in lightbox2?

It is okay if you give me example code to open image in blogger default lightbox.

this is my code

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

Foi útil?

Solução

I have see your link and to open the images in light box you have to change the href attribute of the anchor tag wrapping the image. Follow jquery lightbox tutorial here http://leandrovieira.com/projects/jquery/lightbox/ or you can choose any of the following option here
http://plugins.jquery.com/tag/lightbox/
its simple and straight.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top