salino2835 Posted August 29, 2015 Share Posted August 29, 2015 Im creating a portfolio website and i need help with pop ups. I found this code http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_popup_image but when i add more than one photo no matter what image i hit the pop up/larger image it always shows the first image. is there a way around that? thanks Link to comment Share on other sites More sharing options...
dsonesuk Posted August 29, 2015 Share Posted August 29, 2015 You have to make sure you change the id ref of the other pop-up container, and make sure the anchor link href matches <!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"><script src="http://code.jquery.com/jquery-1.11.3.min.js"></script><script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script></head><body><div data-role="page"> <div data-role="header"> <h1>Welcome To My Homepage</h1> </div> <div id="pageone" data-role="main" class="ui-content"> <p>Click on the image to enlarge it.</p> <p>Notice that we have added a "back button" in the top right corner.</p> <a href="#myPopup" data-rel="popup" data-position-to="window"> <img src="skaret.jpg" alt="Skaret View" style="width:200px;"></a> <a href="#myPopup2" data-rel="popup" data-position-to="window"> <img src="skaret.jpg" alt="Skaret View" style="width:200px;"></a> <div data-role="popup" id="myPopup"> <p>This is my picture!</p> <a href="#pageone" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a><img src="skaret.jpg" style="width:800px;height:400px;" alt="Skaret View"> </div> <div data-role="popup" id="myPopup2"> <p>This is my 2nd picture!</p> <a href="#pageone" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a><img src="skaret.jpg" style="width:800px;height:400px;" alt="Skaret View"> </div> </div> <div data-role="footer"> <h1>Footer Text</h1> </div></div> </body></html> Link to comment Share on other sites More sharing options...
salino2835 Posted August 29, 2015 Author Share Posted August 29, 2015 thank you so much!!! that worked 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now