Galeria w jQuery

0

Dlaczego gdy kliknę na obrazek z boxa nie wyświetla się zawartość klasy .show? Co jest nie tak w kodzie jQuery?

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>JavaScript</title>
	</head>
	<style>
		* { margin: 10px; }
		.content { width: auto;  height: auto; padding: 10px; background: #D9D9D9; border: 1px #444 solid; }
		.square { width: 250px; height: 250px; display: inline-block; }
		.square img { max-width: 100%; border: 1px #444 solid; }
		.square a:hover img { opacity: 0.9; }

		/*Show image*/
		.show { width: auto; height: auto; padding: 1px; border: 1px #777 solid; }
	</style>
	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script>
		$(document).ready(function(){
		    $(".square a:hover img").click(function(){
		        $(".show").fadeToggle("slow");
		    });
		});
	</script>
	<body>
		<div class="content">
			<div class="square">
				<a href="#"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR0HAczCD0mZObxheRam07H5Lro1cx7O6-mfQKUNMuLcrRUhB73og"/></a>
			</div>
		</div>
	</body>
</html>

Link do demo: https://jsfiddle.net/hadaa5re/

Pytanie drugie. Dlaczego gdy przybliżę tą stronę nawet w demo do 150% w chrome to box ze zdjęciem wychodzi poza content? Jak to naprawić?

0
  1. Bo żadnemu elementowi nie nadałeś takiej klasy, to co ma się niby wyświetlić?
  2. Bo przybliżanie skaluje wszystko, na tym polega. jak chcesz żeby box miał taki sam wymiar jak zdjęcie to nadaj im taki sam rozmiar.
0
$(".square a:hover img")

na

$(".square a img")

Dla hoverów masz w jQuery inną metodę.
https://api.jquery.com/hover/

1 użytkowników online, w tym zalogowanych: 0, gości: 1