Mobile Popup Help Please

Mobile Popup Help Please

  1. Hi Everyone


I am new to these forums and to jquery mobile and starting to develop strong feelings for Jquery Mobile :-)  But we have hit a stumbling block in our relationship and I hope someone can help :-)

Jquery - 1.11.1

Jquery Mobile 1.4.5

I am using the lightbox code as shown in the documentation and would like to place a link and text the thumbnails so users can be directed to another page but also maintain the popup functionality.

  1. <a href="#popupParis" data-transition="fade" data-rel="popup" data-position-to="window"><img class="popphoto" style="width: 30%;" alt="Paris, France" src="../_assets/img/paris.jpg"></a>
  2. <div id="popupParis" data-role="popup" data-theme="b" data-corners="false" data-overlay-theme="b">
        <a class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right" href="#" data-rel="back">Close</a><img class="popphoto" style="max-height: 512px;" alt="Paris, France" src="../_assets/img/paris.jpg">

Above are the 2 lines of code used to generate the thumbnail and the popup, I struggle with CSS at times but have no trouble with javascript :-)

I would like to make the thumbnails look like the image below but still have the user able to click the image to view a larger  popup.  Any help or advice would be greatly appreciated.



And yes the ugly man is me :-)


Peter