Jquerry pokazywanie obrazka po najechaniu na miniaturkę

0

Witam.
chciałbym aby po najechaniu na miniaturkę jakiegoś obrazka, pokazywała się jego większa wersja na środku ekranu. Udało mi się to zrobić ale po najechaniu obrazek jquery wykonuje dwa razy funkcje show i poza tym jeżeli miniaturka jest pod miejscem gdzie pokazuje się większa wersja to duży obrazek mi miga pokazuje się i znika i w ogóle robi się bałagan. Jak inaczej można to rozwiązać?

Pokazujący się obrazek:

div#picture_mouse{
	display:none;
	text-align: center;
	position: fixed;
	opacity: 0.9;
	height: 400px;
	width: 509px;
	margin: auto;
	margin-top: -200px;
	margin-left: -254px;
        top: 50%;
	left: 50%;
	z-index: 10;
	-moz-border-radius:10px; /* FF */
	-webkit-border-radius:10px; /* przeglądarki z webkitem (Safari, Chrome itp.) */
	-khtml-border-radius:10px; /* przeglądarki typu K-meleon (typowo Linuxowe) */
	border-radius:10px; /* pozostałe przeglądarki */
	behaviour:url(border-radius.htc); /* dodatek dla badzIEwnej przeglądarki */
}

Jquery:

<script type="text/javascript">	
	$("ul.prod_list").children("li").children("img").mouseenter(function() {
		var zdjecie=$(this).attr("src");			
		$("div#picture_mouse").children("img").attr("src",zdjecie);
		$("div#picture_mouse").show("scale", {}, 100);
	}).mouseleave(function() {
		$("div#picture_mouse").hide("scale", {}, 100);
	});
</script>

Kod html:

<ul class="prod_list">
	<li><img src="zdjecia_protez/lcp_photo/<?php echo $answer[0]['photo']; ?>"> <p><?php echo $answer[0]['opis']; ?></p> <p><?php echo $answer[0]['type']; ?></p></li>
	<li><img src="zdjecia_protez/lcp_photo/<?php echo $answer[0]['photo']; ?>">	<p><?php echo $answer[0]['opis']; ?></p> <p><?php echo $answer[0]['type']; ?></p></li>
	<li><img src="zdjecia_protez/lcp_photo/<?php echo $answer[0]['photo']; ?>">	<p><?php echo $answer[0]['opis']; ?></p> <p><?php echo $answer[0]['type']; ?></p></li>
	<li><img src="zdjecia_protez/lcp_photo/<?php echo $answer[0]['photo']; ?>">	<p><?php echo $answer[0]['opis']; ?></p> <p><?php echo $answer[0]['type']; ?></p></li>
	<li><img src="zdjecia_protez/lcp_photo/<?php echo $answer[0]['photo']; ?>">	<p><?php echo $answer[0]['opis']; ?></p> <p><?php echo $answer[0]['type']; ?></p></li>
	<li><img src="zdjecia_protez/lcp_photo/<?php echo $answer[0]['photo']; ?>">	<p><?php echo $answer[0]['opis']; ?></p> <p><?php echo $answer[0]['type']; ?></p></li>
	<li><img src="zdjecia_protez/lcp_photo/<?php echo $answer[0]['photo']; ?>">	<p><?php echo $answer[0]['opis']; ?></p> <p><?php echo $answer[0]['type']; ?></p></li>
</ul>

<div id="picture_mouse"><img src=""/></div>
0
$("ul.prod_list li img").hover(
  function () {
    $("div#picture_mouse img").attr("src", this.src).parent().show("scale", {}, 100);;
  }, 
  function () {
    $("div#picture_mouse").hide("scale", {}, 100);
  }
);

Się uczepiłeś metody children ... po co używać , jeśli możesz to zastosować w zapytaniu? Np.

$("ul.prod_list").children("li").children("img") === $("ul.prod_list > li > img")
0

Niestety dalej nic. Wydaje mi się, że to dlatego, że po najechaniu na obrazek pojawia się nad tym obrazkiem powiększona wersja która tak jakby zakrywa ten mały obrazek i jest to widziane jako zjechanie kursora z miniaturki.

0

jeśli duży obrazek ci zasłania miniaturkę za każdym razem, to :

$("ul.prod_list li img").hover(
  function () {
    $("div#picture_mouse img").attr("src", this.src).parent().show("scale", {}, 100);;
  }, 
  function () {
	$("div#picture_mouse img").one("mouseleave", function() {
               $(this).parent().hide("scale", {}, 100);
        });
  }
);
 
0

Zrobiłem testową stronę.
http://www.ntmmed.webd.pl/testy/

0
var in_work = false;
$("ul.prod_list li img").mouseenter(
  function () {
	if(!in_work){
		in_work = true;
		show_func = function(tsrc){
			var p_mouse = $("div#picture_mouse");
			if (p_mouse.is(":hidden")) {
				p_mouse.find("img").attr("src", tsrc).parent().show("scale", function () {
					in_work = false;
				}, 1000);
			} else {
				p_mouse.hide("scale", function () {
					show_func(tsrc);
				}, 100);
			}
		};
		show_func(this.src);
	}
  }
);

A kiedy ty chcesz by okienko znikało? Gdy użytkownik zjedzie z miniaturki czy z powiekszenia?

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