I try to make a simple gallery in one page, but when replacing the attribute value after the substitution, for some reason, the image is loaded in a new window. here is the code. The bottom line is that in #big in src the value of the href image is substituted and loaded later in the same window, but all is well only until it is added
$('#big img').load(function () { $(this).fadeIn(2000); }); after which, when clicked, a new page with a picture is simply loaded, instead of loading it in the same place instead of start.jpg
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"/> <title>Email input page</title> <style> #gallery { padding: 20px; border:1px solid #cccccc; width: 483px; margin: 10px auto; height: 380px; } #big { background-image: url("../images/gal/loader.gif"); background-repeat: no-repeat; background-position: 50% 50%; width: 483px; height: 302px; border:1px dotted #cccccc; } #small { margin-top: 10px; margin-left: 33px; } #small a img{ border:none; } </style> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> $(document).ready(function($) { $('#small a').click(function (eventObj) { $('#big img').hide().attr('src',$(this).attr('href')); $('#big img').load(function () { $(this).fadeIn(2000); }); eventObj.preventDefault(); }); }); </script> </head> <body> <div id="gallery"> <div id="big"><img src="images/gal/start.jpg" alt="Старт" /></div> <div id="small"> <a href="images/gal/1.jpg"><img src="images/gal/1_mini.jpg" alt="Миниатюра 1" /></a> <a href="images/gal/2.jpg"><img src="images/gal/2_mini.jpg" alt="Миниатюра 2" /></a> <a href="images/gal/3.jpg"><img src="images/gal/3_mini.jpg" alt="Миниатюра 3" /></a> <a href="images/gal/4.jpg"><img src="images/gal/4_mini.jpg" alt="Миниатюра 4" /></a> </div> </div> </body> </html> 