jQuery Bilder anzeigen, durchblättern, Effekte einfügen

Mr. Tommes · 21. März 2013

Hallo zusammen,

mein Chef ist letztens auf eine Seite gestoßen:

und hat dort einen Effekt gesehen. Bei einem Bild hat man einen Button "ON" und einen "OFF".

Wenn man dort drauf klickt, dann wird ein anderes Bild geladen. Hat dann den Effekt, als würde man das Licht an bzw. aus machen. Er meinte zu mir, ich solle das mal nachbauen. Leider habe ich bislang keine Ahnung. Habe herausgefunden, dass das mit ner brainbox in Verbindung mit jQuery geht.

Kann mir jemand weiterhelfen? Oder vielleicht sogar so ein Beispiel mal zukommen lassen?

Ich verzweifel langsam ein wenig.

Vielen Dank schonmal.

Gruß

Thomas

Patrick_C64 · 21. März 2013

<!--  header ?? nö heute nich   -->

<html>

	<head>


		<style>

			.btn{

				background-color:blue;

				display:inline-block;

				padding:20px;

				border:1px solid black;

				position:absolute;

				bottom:5px;

			}

			.btn:hover{

				background-color:#aaa;

			}

			#on{

				left:10px;

				z-index:2;

			}

			#off{

				right:10px;

				z-index:2;

			}

			#container{

				position:absolute;

				top:200px;

				left:200px;

				border:1px solid black;

				display:inline-block;

				width:200px;

				height:200px;

			}

			#imgDsp{

				width:200px;

				height:200px;

			}

			</style>

	</head>


	<body>

		<div id="container">

		<img id="imgDsp" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS9toBtHaB_krIcw6ayQlMpr_1d-t3nR_yFsmngHB3ylA6tKhXWlg"/>

			<div id="on" class="btn" onClick="imgOn()">

			On

			</div>

			<div id="off" class="btn" onClick="imgOff()">

			Off

			</div>


		</div>

	</body>


	<script type="text/javascript">

		function imgOn(){

			document.getElementById("imgDsp").src="http://www.belux.com/media/products/photographs/TWILIGHT/TWILIGHT_480px/TWI_227_on.jpg";	

		}	

		function imgOff(){

			document.getElementById("imgDsp").src="http://www.belux.com/media/products/photographs/TWILIGHT/TWILIGHT_480px/TWI_227_off.jpg";	

		}				

	</script>

</html>

[/code]

Getestet in IE & FF!

Du schuldest mir jetzt 20 minuten *grins!

Guck ob Du's als Inspiration verwenden kannst, Anregung genug sollte es sein!

PS: Finger weg von Erdnüssen!

Bearbeitet 21. März 2013 von Patrick_C64

Mr. Tommes · 22. März 2013

Vielen Dank !!!!

Das hilft mir wirklich sehr weiter! Genau so was habe ich gesucht.

Und danke für deine 20 Minuten !

Mr. Tommes · 25. April 2013

Hallo nochmal,

hänge doch noch an diesem Problem.

Ich habe mir jetzt Snippets zusammengesucht und auch die Sachen von Patrick_C64 eingebaut und folgendes (s. Anhang) zusammenbekommen. Leider bekomme ich es nicht hin, dass sich das Bild verändert wenn ich ein Beispielbild anklicke. Dieses wird dann groß angezeigt und ich habe dort auch zwei Button hin bekommen. Einen On und einen OFF Button. Nur leider verändert sich nicht das Bild, das sich verändern soll. Es liegt an der Bezeichnung der ID, aber ich weiss nicht, was ich da abändern soll.

Also wenn noch jemand 20 Minuten seiner Zeit opfern mag, fänd ich es klasse, wenn sich jemand meinen Anhang mal angucken könnte.

neuer Test.rar

rny · 27. April 2013

Hi,

ich hab mal kurz drübergeschaut und ein paar Punkte fallen dann doch auf:

1. Auf belux.com werden jeweils zwei verschiedene Bilder (xyz_on.jpg & xyz_off.jpg) benutzt. Mit einem Klick auf On/Off wird dann das entsprechende Bild geladen. Im Moment benutzt du jeweils nur eins, daher kann das im Moment mit den Bildern in deinem Ordner nicht funktionieren.

Ausnahme ist das eine funktionierende Bild, hier verlinkst du direkt auf belux.com, daher sind "on" und "off" Variante verfügbar.

Um dieses Problemchen zu lösen könntest du erstmal von jedem großen Bild das du benutzt eine Kopie machen und es mit Paint (oder einem ähnlich professionellem Bildbearbeitungsprogramm) etwas verändern und entsprechend umbenennen.

2. Deine imgOff() und imgOn() Funktion holt sich das Bild über die ID ('imgDsp') und trifft daher nur das Bild von belux.com. Um das zu umgehen könntest du dir als Workaroung das Bild zum Beispiel über die Klasse holen, in dem Fall wäre das 'fancybox-image'. Das ist allerdings eher hässlich, optimal wäre eine ID für die fancybox.

3. In den Funktionen ist im Moment auch direkt auf ein Bild auf belux verlinkt. Du musst hier eigentlich nur das src-Attribut des Bildes entsprechende ändern um das jeweils andere Bild anzuzeigen. ("src.replace('off','on')" oder so)

Ist keine Patentlösung, ich würds allgemein etwas anders machen, aber sollte schonmal etwas weiterhelfen. Wenn noch Fragen da sind, einfach fragen

Mr. Tommes · 30. April 2013

Hallo rny,

vielen Dank für deinen Beitrag.

Das mit den unterschiedlichen Bildern ist mir bewusst. Ich weiss nur nicht, wie ich das mit der ID umsetzen kann, bzw. wo ich dem "vergrößerten" Bild eine ID geben kann, damit das Bild in der fancybox geändert wird.

Das Bild, das momentan klappt, ist ja in einem div und das image hat direkt eine ID. Das kann ich nachvollziehen.

Wenn man jetzt aber auf ein kleines Bild klickt, wird dieses ja vergrößert. Dort möchte ich ja die Funktion einbauen.

Leider weiss ich nicht, wo ich da eine ID einbauen kann oder wie ich die Klasse ansprechen kann.

Vielleicht hast du da noch ein paar Tips für mich.

rny · 30. April 2013

Ich schau von zuhause nochmal genauer, aber mit etwas in dieser Richtung solltest du das große Bild über die Klasse treffen.

document.getElementsByClassName("fancybox-image")[0]

edit: Achja, IE8 und niedriger kommt mit getElementsByClassName wohl nicht klar. Nicht sicher ob das für dich wichtig ist.

Bearbeitet 30. April 2013 von rny

Mr. Tommes · 16. Mai 2013

Hallo,

vielen Dank. Das Ansprechen über die Klasse hat geklappt.

Jetzt habe ich nur noch ein Problem. Wenn ich auf ein kleines Bild klicke öffnet sich das große Bild. Wenn ich dort auf ON oder OFF klicke ändert sich das Bild, jedoch ist das neue Bild fest angegeben, egal welches große Bild angezeigt wird:

document.getElementsByClassName("fancybox-image")[0].src="http://www.belux.com/media/products/photographs/TWILIGHT/TWILIGHT_480px/TWI_227_on.jpg";

Wie bekomme ich es hin, dass sich das Zielbild je nach Quellbild entsprechend ändert? Über den Index scheint es nicht zu klappen. Also wenn ich Bild 1 groß habe und auf OFF klicke soll Bild 1 dunkel angezeigt werden (Bild als dunkle Version ist im Beispiel noch nicht enthalten). Entsprechend soll bei Bild 2 das Bild 2 dunkel angezeigt werden.

Ich habe nochmals meinen Code als Anhang angefügt.

Sorry für die vielen Fragen, aber auf dem Gebiet bin ich absoluter Laie

neuer Test.rar

rny · 16. Mai 2013

Bin auf Arbeit und komme wegen der Firewall nicht an den Code. Aber im Prinzip musst du die erstmal Bilder sinnvoll benennen, (bild1_on, bild1_off, bild2_on, bild2_off etc..). Dann kannst du mit den click-funktionen jeweils das src Attribut des Elements ändern indem du "on" mit "off" ersetzt bzw umgekehrt.

Der Code ist jetzt einfach runtergeschrieben und wahrscheinlich hab ich was essentielles vergessen, aber die Idee sollte klar werden:


var img = document.getElementsByClassName("fancybox-image")[0];

function imageOn() {

    img.src = img.src.replace('off','on');

}

function imageOff() {

    img.src=img.src.replace('on','off');

}

Anmelden

jQuery Bilder anzeigen, durchblättern, Effekte einfügen

Empfohlene Beiträge

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Dein Kommentar

Fachinformatiker Jobs

Fachinformatiker.de, 2024 by SE Internet Services

Links

Fachinformatiker.de App

Kontakt

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte