zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden jquery Bild-Src tauschen und ein"faden"

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 31.01.2012, 17:05
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.03.2005
Ort: Nürnberg
Beiträge: 94
letslounge befindet sich auf einem aufstrebenden Ast
Standard jquery Bild-Src tauschen und ein"faden"

Hallo,

ich tausche mit jquery über
Code:
$(document).ready(function(){
 $('.haro').click(function(){
   $("#teambild").attr('src',"bilder/team/haro.jpg");
 });
 $('.jukl').click(function(){
   $("#teambild").attr('src',"bilder/team/jukl.jpg");
 });
  $('.karo').click(function(){
   $("#teambild").attr('src',"bilder/team/karo.jpg");
 });
});
die src des Bildes mit der ID teambild - klappt auch wunderbar.

...nur:
wie bekomm ich es jetzt hin, dass das neue Bild mit fadeIn soft eingeblendet wird?
Auch googleln half mir leider nicht weiter...hat jemand von Euch eine Tip?

Denkbar dankbar über Hilfe

Michael
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 31.01.2012, 18:56
Benutzerbild von David
auch, ja!
XHTMLforum-Kenner
 
Registriert seit: 08.11.2007
Beiträge: 2.626
David ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer Anblick
Standard

Was eingeblendet werden soll, muss vorher erstmal ausgeblendet werden/sein.
Also entweder
1) ausblenden
2) src tauschen
3) einblenden

oder, so löse ich das meistens, zwei Img-Elemente übereinander legen. Wenn es sich nur um drei Bilder handelt, kannst Du auch alle drei gleich übereinander legen.
Dann einfach die Reihenfolge tauschen und das vordere Bild ausblenden und nach hinten schieben. Dort wieder einblenden.
__________________
github | http://dnaber.de
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 01.02.2012, 14:11
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.03.2005
Ort: Nürnberg
Beiträge: 94
letslounge befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von David Beitrag anzeigen
Was eingeblendet werden soll, muss vorher erstmal ausgeblendet werden/sein.
Also entweder
1) ausblenden
2) src tauschen
3) einblenden

oder, so löse ich das meistens, zwei Img-Elemente übereinander legen. Wenn es sich nur um drei Bilder handelt, kannst Du auch alle drei gleich übereinander legen.
Dann einfach die Reihenfolge tauschen und das vordere Bild ausblenden und nach hinten schieben. Dort wieder einblenden.
...Dank der Antwort...da jedoch an anderer Stelle bis zu 15 Bilder ist das anfängliche Übereinanderlegen nicht wirklich praktikabel...

Viele Grüße

Michael
Mit Zitat antworten
  #4 (permalink)  
Alt 01.02.2012, 17:15
Benutzerbild von David
auch, ja!
XHTMLforum-Kenner
 
Registriert seit: 08.11.2007
Beiträge: 2.626
David ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer Anblick
Standard

Dann legst Du ein Array mit den URLs zu den Bildern an und setzt sie dann zu gg. Zeit in eines der beiden Bild-Elemente ein.
__________________
github | http://dnaber.de
Mit Zitat antworten
  #5 (permalink)  
Alt 01.02.2012, 20:43
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.03.2005
Ort: Nürnberg
Beiträge: 94
letslounge befindet sich auf einem aufstrebenden Ast
Standard

...wird probiert, danke !
Mit Zitat antworten
  #6 (permalink)  
Alt 02.02.2012, 10:31
Benutzerbild von Chris2011
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 04.01.2011
Beiträge: 301
Chris2011 befindet sich auf einem aufstrebenden Ast
Standard

Hi,

ich würde es so machen.

Code:
<!DOCTYPE HTML>
<html>
<head>
<title>Image</title>


	<script src="http://code.jquery.com/jquery-latest.js"></script>

	<script>
function change_image(bild){
	
	$('#teambild').fadeOut('slow', function() {
		$("#teambild").attr("src", bild);
			$('#teambild').fadeIn('slow');
	});
}


	</script>
	
	
</head>
<body>

<div class="haro" onclick="change_image('Bild1.png')">haro</div>
<div class="jukl" onclick="change_image('Bild2.png')">haro</div>
<div class="karo" onclick="change_image('Bild3.png')">haro</div>


<img src="Bild.png" id="teambild" alt="image" >

</body>
</html>
Mit Zitat antworten
  #7 (permalink)  
Alt 03.02.2012, 15:24
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.03.2005
Ort: Nürnberg
Beiträge: 94
letslounge befindet sich auf einem aufstrebenden Ast
Standard

...wird auch probiert - danke!
Mit Zitat antworten
  #8 (permalink)  
Alt 03.02.2012, 16:33
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.03.2005
Ort: Nürnberg
Beiträge: 94
letslounge befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Chris2011 Beitrag anzeigen
Hi,

ich würde es so machen.

Code:
<!DOCTYPE HTML>
<html>
<head>
<title>Image</title>


	<script src="http://code.jquery.com/jquery-latest.js"></script>

	<script>
function change_image(bild){
	
	$('#teambild').fadeOut('slow', function() {
		$("#teambild").attr("src", bild);
			$('#teambild').fadeIn('slow');
	});
}


	</script>
	
	
</head>
<body>

<div class="haro" onclick="change_image('Bild1.png')">haro</div>
<div class="jukl" onclick="change_image('Bild2.png')">haro</div>
<div class="karo" onclick="change_image('Bild3.png')">haro</div>


<img src="Bild.png" id="teambild" alt="image" >

</body>
</html>
perfekt, läuft, DANKE!
Mit Zitat antworten
  #9 (permalink)  
Alt 26.05.2012, 16:14
Neuer Benutzer
neuer user
 
Registriert seit: 26.05.2012
Beiträge: 6
Garavani befindet sich auf einem aufstrebenden Ast
Standard Bilder austauschen

Zitat:
Zitat von Chris2011 Beitrag anzeigen
Hi,

ich würde es so machen.

Code:
<!DOCTYPE HTML>
<html>
<head>
<title>Image</title>


	<script src="http://code.jquery.com/jquery-latest.js"></script>

	<script>
function change_image(bild){
	
	$('#teambild').fadeOut('slow', function() {
		$("#teambild").attr("src", bild);
			$('#teambild').fadeIn('slow');
	});
}


	</script>
	
	
</head>
<body>

<div class="haro" onclick="change_image('Bild1.png')">haro</div>
<div class="jukl" onclick="change_image('Bild2.png')">haro</div>
<div class="karo" onclick="change_image('Bild3.png')">haro</div>


<img src="Bild.png" id="teambild" alt="image" >

</body>
</html>
Super interessant, was ihr da macht!
Danke erstmal fürs Spicken dürfen
Habe versucht mir dieses Script zu klauen und in meines zu integrieren, da ich so etwas auch machen will. Aber ich kriegs nicht wirklich hin, weil
a) Anfänger
b) ich es vermischen will mit einem anderen recht komplexen jQuery Scirpt, das zugleich die Bilder an die Browserfenstergröße anpasst, auch wenn man dieses live verändert, was ich sehr klasse finde.
Nun möchte ich aber noch, dass diese sich skalierenden Bilder – genau in der Art wie Ihr es hier gemacht habt – faden und abwechseln.
Ich habe das Gefühl das geht, habe auch viel probiert, habs aber leider nicht hinbekommen

Habt Ihr7bzw. Du, Chris2011 Lust da mal draufzuschauen und mir einen Tipp zu geben?

Mein bisheriger Code ist komplett:


<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #ffffff;
}
* {
padding-left:6px;
padding-right:6px;
margin-top: 0.24%;
}
.fit {
max-width: 100%;
max-height: 100%;
}
.center {
display: block;
margin-left:auto;
margin-right:auto;

}
img
{ border-style: none;
}
a:focus {
outline: 0;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="JavaScript">

function nextLetter()
{
$('#a').fadeOut(300, 'linear')
}

function set_body_height()
{
var wh = $(window).height();
$('body').attr('style', 'height:' + wh + 'px;');
}
$(document).ready(function() {
if (document.width > 1000)
{
window.resizeTo(document.width/2.7, document.height/1.2);
}
else
{
window.resizeTo(document.width/1.9, document.height);
}
set_body_height();
$(window).bind('resize', function() { set_body_height(); });
});


</script>

</head>
<body>

<div id="a"><img id="the_pic_3" class="center fit" src="images/Memoir_a.gif"></div>
<div id="g"><img id="the_pic" class="center fit" src="images/Memoir_g.gif"></div>
<div id="y"><img id="the_pic_2" class="center fit" src="images/Memoir_y.gif"></div>


<div style="position: fixed; right: 50%; bottom: 5%; height: 47px; width: 50px; cursorointer;"><a href="javascript:top.window.close()"><img src="images/Arrow_left_pos.png"></a></div>
<div style="position: fixed; left: 50%; bottom: 5%; height: 47px; width: 50px; cursorointer;" onclick="nextLetter()"><img src="images/Arrow_right_pos.png"></div>

</body>
</html>

Die unteren divs mit den Pfeilen (arrows) sind erstmal uninteressant. (über die Pfeile will ich das dann via onclick steuern)

Was mir schleierhaft ist, ist das mit den Bild src, Bild1, Bild2 etc. das will mir nicht in den Kopf.
Meine 3 Bilder heissen „Memoir_a.gif“, „Memoir_g.gif“ und „Memoir_y.gif“.
habe auch versucht sie in Bild1 etc. umzutaufen, hat aber auch nicht geklappt.
Komplex wahrscheinlich, weil ja beide Funktionen parallel laufen müssen.

Geht das überhaupt Eurer Ansicht nach?

Schöne Grüße
und herzlichen Dank schon vorab für Euer Interesse!

Garavani
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 02.10.2013, 11:34
Neuer Benutzer
neuer user
 
Registriert seit: 02.10.2013
Beiträge: 6
byhein befindet sich auf einem aufstrebenden Ast
Standard

Hallo Chris2011,

vielen Dank für dein kleines Bildwechselscript

Auf der Basis habe ich folgenden Bildwechsel erstellt. Bei Klick auf Kunden wir das Headerbild gewechselt, nun möchte ich aber auf erneuten Klick auf Kunden wieder zum ursprünglichen Bild zurück. Kriege es zum Verrecken nicht hin, kannst du oder gerne jemand anderes mir einen Tipp geben? Wäre echt prima ...

Code:
<script>
function change_image(bild){
	
$('#header').fadeOut('slow', function() {
	$("#header").attr("src", bild);
	$('#header').fadeIn('slow');
});
}
</script>

<div id "top_píc"><img src="_pics/top_erfahrung.jpg" id="header" alt="image" width="960" height="250" alt="Vertrauen ist die Basis unserer Zusammenarbeit." /></div>

<span class="header" onclick="change_image('_pics/top_kunden.jpg')"><span class="underline"><a href="#" class="underline_red">Kunden</a></span></span>
Hoffe auf Hilfe.


Viele Grüße,
Jürgen
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
jQuery: Bild an Div anpassen sepp88 Javascript & Ajax 3 22.07.2011 10:22
jQuery - Neuen DIV erzeugen und anzeigen EntenMann Javascript & Ajax 0 11.08.2009 21:07
Imagemap Zugriff bei einer Gallery Sarah14 Javascript & Ajax 3 12.11.2007 15:06
Anfänger: Bild mit Link - Bild tauschen wenn visited oli CSS 3 26.09.2004 14:03


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:31 Uhr.