simplemodal click to show image?

E

2

0

I have been working on the this for about ten hours and I am no closer to grokking the method than when I started. None of the examples at http://www.ericmmartin.com/projects/simplemodal seem to address this task in terms and HTML code that I am familiar with. My test page is at: http://chesstao.com/test.php

I think I followed the instructions and tried:

<!DOCTYPE html> <html lang="en"> 

<head><title>test</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link href="../css/demo.css" rel="stylesheet" />
<link href="../css/basic.css" rel="stylesheet"  />
<link href="../css/gallery.css" rel="stylesheet"  />

</head><body>

<div><a href="images/aveskulov-large.jpg" id="sample">
click me </a></div>

<!--jQuery-->
<script src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script src="js/jquery.simplemodal-1.4.1-min.js"></script>
<script src="js/basic-min.js"></script>
<script src="js/gallery-min.js"></script>

<script>$("#sample").modal({opacity:80,overlayCss: {backgroundColor:"#fff"}});</script>

</body></html>

But the results were bad. I'd really like to know what simple solution am I missing!

Egis answered 13/10, 2011 at 22:39 Comment(0)

F

1

If your problem is that the image opening in a new window it is probably because the click me has an href.It won't load any other code just go straight to the href. Try making your image into an html img tag, set that to display none then on the click of some element do the modal and set the display to block.

I don't know if the last version of your page was what you tried but if it was there was more than a few bugs that was preventing it from working. But this gets what you want. I am sure you can work off of this to get it to do and look how you want but this is what I did to get it to work

$(document).ready(function() {
     $("#sample").click(function(){
       $.modal("<img src=\"test.php_files/aveskulov-large.jpg\" style=\"\"/>");
     });
});

Also if you do this you need to take out the img html tag so that it only exists in this modal. Goodluck with the rest. P.S. if you don't have firebug get it, its a firefox plugin and it would have told you you had a syntax error.

Federate answered 13/10, 2011 at 22:47 Comment(3)

<div><img src="images/aveskulov-large.jpg" style="display:hidden"> <span id="sample"> click me </span> </div> -that didn't work. – Egis 13/10, 2011 at 23:49

I don't know if stackoverflow informs of if I edit my post but I updated it. – Federate 14/10, 2011 at 3:26

Thank you very much! simplemodal is a versatile product for chesstao.com and I am resolved to use it for my other web site, communitychessclub.com in showing groups of photos as a related galery. – Egis 14/10, 2011 at 4:56

O

1

Try attaching simple modal when the DOM's fully loaded:

<script>
$(document.ready(function() {
  $("#sample").modal({opacity:80,overlayCss: {backgroundColor:"#fff"}});
});
</script>

Orifice answered 13/10, 2011 at 22:46 Comment(1)

That helped a little. But the image popped up in the browser in a new tab, not as modal. – Egis 13/10, 2011 at 22:53

F

1