Problem bei Kombination von einfacher Galerie mit Lupenfunktion

[TOMahawk85]

Hallo,

2 Dinge gleich vorweg:
1. Mein Problem ist (womöglich) eine Kombination aus Java und CSS und ich hoffe, dass ich das Thema bei Java richtig einsortiert habe.
2. Ich kenn mich mit JavaScript nicht aus (auch wenn ich es ein wenig interpretieren kann). Allerdings waren Kenntnisse zum einbauen des Scripts auch nicht nötig.

Problem:
Ich muss eine kleine Galerie erstellen für 3 Bilder und mit einer Lupenfunktion.
Meine Idee war es, die Bilder als Thumbnail (z.B. 100x100px) nebeneinander anzuordnen und per MouseOver zu vergrößern (im Moment 300x400px; mittels Transition im CSS). Wenn ein Bild dann die 300x400px groß ist, soll die Lupe (JavaScript) zum Einsatz kommen.
Das Einbauen der Lupe war genauso wenig ein Problem wie das Vergrößern der Thumbnails.

Beides in Kombination will allerdings nicht funktionieren.


Ich hab mal meine kleine "Testumgebung" angehängt, damit auch genau zu verstehen ist, was ich meine. Dort ist zu erkennen, dass entweder die Lupe ODER die Vergrößerung funktioniert.

Möglicherweise denke ich ja zu kompliziert - oder aber nicht kompliziert genug.
Ich hoffe mir kann jemand von euch weiterhelfen und möchte mich schonmal im Voraus für jede Hilfe bedanken.

MfG, TOMahawk

 

[tombe]

Wenn ich dich richtig verstehe, dann sollen die Bilder zuerst auf die Größe 300 x 400 Pixel vergrößert werden und dann soll zusätzlich noch die Lupe erscheinen?

Oder soll ein Bild das nur 100 x 100 Pixel groß ist auf 300 x 400 Pixel vergrößert werden und bei Bilder die bereits 300 x 400 Pixel groß angezeigt werden sollen dann die Lupe erscheinen?

 

[TOMahawk85]

Ersteres ist richtig. Erst wird das Bild groß, dann kommt die Lupe.

 

[tombe]

Also wenn ich ehrlich sein soll, bei dem Code den du verwendest blicke ich nicht wirklich durch (leider).

Habe deshalb selber etwas entworfen. Vielleicht kannst du das ja auch verwenden.

.pic1 {
	width: 100px;
	position: absolute;
	left: 10px;
	top: 10px;
	z-index: 0;
}
.pic2 {
	width: 100px;
	position: absolute;
	left: 10px;
	top: 100px;
	z-index: 0;
}
.zoom{
	width: 200px;
	height: 200px;
	border: solid 1px;
	position: absolute;
	left: 0px;
	top: 0px;
	display: none;
	z-index: 2;
}

$(document).ready(function() {

$("#pic1, #pic2").mousemove(function(e) {
	$("#zoom").css("left", e.pageX + 10);
	$("#zoom").css("top", e.pageY + 10);
	x = (((e.pageX - $(this).position().left) / $(this).width()) * 100) + "%";
	y = (((e.pageY - $(this).position().top) / $(this).height()) * 100) + "%";
	$("#zoom").css("background-position", x + " " + y);
	$("#zoom").css("background-repeat", "no-repeat");
});

$("#pic1, #pic2").mouseenter(function(){
	$(this).css("cursor", 'crosshair');
	$("#zoom").css("backgroundImage", "url(" + $(this).attr("src") + ")");
	$(this).css("z-index", 1);
	$(this).animate({width : 300}, 500);
	$("#zoom").css("display", "block");
});

$("#pic1, #pic2").mouseleave(function(){
	$("#zoom").css("display", "none");
	$(this).animate({width : 100}, 500);
	$(this).css("z-index", 0);
});

});

<img src="http://www.tutorials.de/content/attachments/61986-codepen.jpg.html?cid=18" id="pic1" class="pic1"/>
<br />
<img src="http://www.tutorials.de/content/attachments/62002-slider.jpg.html?cid=18" id="pic2" class="pic2"/>
<div id="zoom" class="zoom"></div>

Was ich bis jetzt nicht hinbekommen habe, ist das die Lupe genau unter dem Mauszeiger platziert ist. In meinem Beispiel ist die Lupe seitlich etwas versetzt. Aber was den Rest angeht entspricht es deinen Vorgaben.

Gruß Thomas

P.S. Man möge mir verzeihen das ich von der Startseite des Forums für dieses Beispiel 2 Bilder "geklaut" habe!