ComputerBase Menü
Aktuelles

JavaScript Bei Klick zahl zuweisen

N

Nose

Lieutenant
Registriert
Dez. 2007
Beiträge
830
Moin!
folgender slider soll modifiziert werden:
http://www.sohtanaka.com/web-design/automatic-image-slider-w-css-jquery/

alles was ich brauch ist ein knopf rechts und ein knopf links um sowohl per "paging"-element als auch per navknopf links und rechts durch meine bildergalerie navigieren zu können. bei der weiterführenden seite: http://www.radiumlabs.com/ findet sich genau das was ich will, und ich hätt auch ne idee das zu erledigen, aber es müsste doch schöner gehen.

meine idee:

alles verwenden wie es ist, meine navknöpfe rechts und links davon positionieren, und dann via im ausgelagerten js:
Code: 
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#nachlinks").click(function() {
$("#window").html("n bild zurück gehn");
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#nachrechts").click(function() {
$("#window").html("rel="1" wird eins runter gesetzt");
});
});
</script>
sowie im body der html datei dann die nav-knöpfe einfügen:
Code: 
		<div id="ruck"><a href="javascript:void(0);" id="nachlinks">zurueck</a></div>
		<div id="zuck"><a href="javascript:void(0);" id="nachrechts">vor</a></div>

was aber keine elegante lösung ist, da ich bei 10 bildern ein ziemlichen .js wust bekomm, viel mehr als eigentlich nötig.


ich müsste also nur per javascript automatisch die richtige "rel-zahl" zuweisen indem ich mir die bild-nummer aus dem dateinamen der gerade angezeigten bilddatei hol und jeweils eins addier bzw subtrahier und das dann in mein navi-knopf rechts und links schreib.

oder doch ganz anders? sorry, is schon spät, aber das hat mich grad stunden gekostet...:freak:

wie mach ich sowas?
ich weiß is keine besonders schwierige aufgabe, aber ich fürcht es is mir gelungen es kompliziertestmöglich zu beschreiben. vielleicht hat ja jemand n tip für mich.

und seid so gut und haltet mich nich für n bescheuerten schüler der seine hausaufgaben gemacht bekommen will, das scheint hier recht gern mal angenommen zu werden....als schüler säß ich jetzt nichmehr vor der kiste...:freak:

danke jedenfalls schonmal fürs lesen. :freaky:
 
Wie wäre es hiermit für zurück?

Code: 
<script type="text/javascript">
$(document).ready(function() {
$("#nachlinks").click(function() {
	var activeChild = document.getElementsByClassName("paging")[0].getElementsByClassName("active")[0];
	var childs = document.getElementsByClassName("paging")[0].getElementsByTagName("a");
	var curIndex;
	for (var i=0; i<childs.length; i++) {
		if (activeChild == childs[i]) {
			curIndex = i - 1;
			break;
		}
	}
	if (curIndex == -1) {
		childs[9].click();
	}
	else {
		childs[curIndex].click();
	}
});
});
</script>
 
jau, traumhaft, vielen dank, hab jetzt vor und zurückbutton.


soweit ich den ausgangscode durchschaut hab, ist es nicht so ohne weiteres möglich jetzt noch einen "bildbeschreibungstext" auf der seite für das jeweils angezeigte bild anzeigen zu lassen, der dann z.b. rechts vom slider steht und sich in nem div befindet...oder hab ich da was übersehen bzw falsch verstanden?

grüße!
 
Naja je nachdem wie du das machen willst - es wäre ja möglich ein Array zu erzeugen in dem die jeweiligen Texte stehen und dann nach einem onclick-Event den Text des div zu ändern auf den dann aktuellen Wert via des Indexes...
 
also, ich hab mir überlegt das sinnvollste wäre mit einem array zu arbeiten:

Code: 
<script type="text/javascript" language="JavaScript">
var bildbeschreibung = new Array(4) ;
bildbeschreibung[1] = erster text zum bild;
bildbeschreibung[2] = zweiter text zum bild;
bildbeschreibung[3] = dritter text zum bild;
bildbeschreibung[4] = vierter text zum bild;
</script>
meine idee dazu war jetzt ich bau einfach in ein div ein script ein welches mir in ein div immer die passende bildbeschreibung reinholt:
Code: 
<div>
<script type="text/javascript" language="JavaScript">
$(document).ready(function ()
{
	var aktiv = document.getElementsByClassName("paging").getElementsByClassName("active").getElementsByAttr("rel");
   
	     document.write(bildbeschreibung[aktiv]);
}
</script>
</div>

damit hätt ich ja aus der klasse "paging" das element das grad auf "activ" gesetzt ist und dessen "rel" wert (der ja mir angibt bei welcher bildnummer ich gerade bin, wenn ich nicht irre).

funktioniert aber nicht. was mach ich falsch? oder stinkt am ende mein ganzer ansatz?

danke nochmal für die ganze hilfe! :)
 
Zuletzt bearbeitet:
Mach mal eine Zahl aus rel ;)
Ergänzung ()

Code: 
<script type="text/javascript" language="JavaScript">
$(document).ready(function ()
{
	var aktiv = Number(document.getElementsByClassName("paging").getElementsByClassName("active").getElementsByAttr("rel"));
   
	     document.write(bildbeschreibung[aktiv]);
}
</script>

Edit: Der obige Code ist Quatsch - hatte mich verlesen, was ich da gerade übernehmen...
 
Zuletzt bearbeitet:
sorry, versteh ich nich.
ich mein dashier:

Code: 
<div class="container">
	
    <div class="folio_block">
    	
        <div class="main_view">

            <div class="window">	
                <div class="image_reel">
                    <a href="http://www.designbombs.com/tag/slider/"><img src="reel_1.jpg" alt="" /></a>
                    <a href="http://www.designbombs.com/tag/slider/"><img src="reel_2.jpg" alt="" /></a>
                    <a href="http://www.designbombs.com/tag/slider/"><img src="reel_3.jpg" alt="" /></a>
                    <a href="http://www.designbombs.com/tag/slider/"><img src="reel_4.jpg" alt="" /></a>
                </div>
            </div>
            <div class="paging">

                <a href="#" rel="1">1</a>
                <a href="#" rel="2">2</a>
                <a href="#" rel="3">3</a>
                <a href="#" rel="4">4</a>
            </div>
        </div>


    </div>

->meine überlegung: wenn ich zuerst classname paging und dann classname active und dann eben den rel mir rausgeb, dann ist der wert vom rel immer ne zahl die ich für die bildbeschreibung verwenden kann. wo is der fehler?
Ergänzung ()

im übrigen möcht ich die zahlen bei "paging" eben noch durch kleine thumbnails ersetzen...
 
Ok, sehe gerade, dass da noch ein paar mehr Fehler drin sind...

Nicht die Anführungszeichen bei Strings vergessen:
Code: 
<script type="text/javascript" language="JavaScript">
var bildbeschreibung = new Array(4) ;
bildbeschreibung[1] = "erster text zum bild";
bildbeschreibung[2] = "zweiter text zum bild";
bildbeschreibung[3] = "dritter text zum bild";
bildbeschreibung[4] = "vierter text zum bild";
</script>

aktiv ist ein String, wie jedes Attribut, das du aus einem Node einer Markup Language abfragst. getElementsByAttr() ist keine mir bekannt Funktion (oder gibt es diese durch jQuery?) nutze stattdessen getAttribute(). Die vorangehenden Funktionen geben im übrigen immer ein Array der zutreffenden Elemente, von denen wir nur das erste Element wollen. Deshalb soltle es insgesamt so aussehen:
Code: 
<script type="text/javascript" language="JavaScript">
$(document).ready(function ()
{
	var aktiv = Number(document.getElementsByClassName("paging")[0].getElementsByClassName("active")[0].getAttribute("rel"));
   
	     document.write(bildbeschreibung[aktiv]);
}
</script>
 
Zuletzt bearbeitet:
aktiv sollte ja nur eine zahl sein, da ich in der zeile "var aktiv = Number.." ja letztlich rel auslese und das ist in jedem fall eine zahl? oder meinst du "aktiv" an sich ist ein string?

aber so oder so gehts nicht....wo fehlts noch?
 
Hast du die untere Funktion mal verwendet anstatt deiner? Ich kriege da nämlich das, was du willst - also bis auf dass document.write() wohl kaum der finale Status ist...
 
Code: 
<script type="text/javascript" language="JavaScript">
$(document).ready(function ()
{
	var aktiv = Number(document.getElementsByClassName("paging")[0].getElementsByClassName("active")[0].getAttribute("rel"));
   
	     document.write(bildbeschreibung[aktiv]);
});
</script>

Da fehlte eine Klammer am Ende bei mir... Vielleicht solltest du außerdem angeben, wann er das schreiben soll... also eher als einfache Funktion, die nach dem click-Event aufgerufen wird...
Ergänzung ()

Welchen Browser verwendest du zum Testen? Ich nutze Firefox und kann da Firebug installieren, was relativ hilfreich ist, da es Javascript-Fehler aufdeckt (wie z.B. vergessene Klammern).
 
ich dachte er hält das so automatisch aktuell in meinem div, egal ob ich jetzt aufs "paging" element oder "vor" bzw "zurück" geklickt habe?

dennoch funktionierts nach wie vor nicht :/

ich hab sämtlichen code den du gepostet hast eingepflegt, müsste es also tun!

firefox 6.0 mit firebug!

wo seh ich was er grad anstellt? die konsole bleibt bei mir leer!?

die testpage die ich weiter oben verlinkt hab is genau in der version wie du sie korrigiert hast...:?
 
Zuletzt bearbeitet:
Code: 
<script type="text/javascript">
function getCurrentIndex(element, childs) {
	var curIndex;
	for (var i=0; i<childs.length; i++) {
		if (element == childs[i]) {
			curIndex = i;
			break;
		}
	}
	return curIndex;
}
function setLabel() {
	with (document.getElementsByClassName("paging")[0]) {
		var activeChild = getElementsByClassName("active")[0];
		var childs = getElementsByTagName("a");
	}
	var curIndex = getCurrentIndex(activeChild, childs);
	document.getElementById("testLabel").textContent = bildbeschreibung[curIndex];
}
var bildbeschreibung = new Array(4) ;
bildbeschreibung[1] = "erster text zum bild";
bildbeschreibung[2] = "zweiter text zum bild";
bildbeschreibung[3] = "dritter text zum bild";
bildbeschreibung[4] = "vierter text zum bild";
$(document).ready(function() {
$("#nachlinks").click(function() {
	with (document.getElementsByClassName("paging")[0]) {
		var activeChild = getElementsByClassName("active")[0];
		var childs = getElementsByTagName("a");
	}
	var curIndex = getCurrentIndex(activeChild, childs) - 1;
	if (curIndex == -1) {
		childs[9].click();
	}
	else {
		childs[curIndex].click();
	}
});
$("#nachrechts").click(function() {
	with (document.getElementsByClassName("paging")[0]) {
		var activeChild = getElementsByClassName("active")[0];
		var childs = getElementsByTagName("a");
	}
	var curIndex = getCurrentIndex(activeChild, childs) + 1;
	if (curIndex == 10) {
		childs[0].click();
	}
	else {
		childs[curIndex].click();
	}
});
setLabel();
});
</script>
<script type="text/javascript">

$(document).ready(function() {

	//Set Default State of each portfolio piece
	$(".paging").show();
	$(".paging a:first").addClass("active");
		
	//Get size of images, how many there are, then determin the size of the image reel.
	var imageWidth = $(".window").width();
	var imageSum = $(".image_reel img").size();
	var imageReelWidth = imageWidth * imageSum;
	
	//Adjust the image reel to its new size
	$(".image_reel").css({'width' : imageReelWidth});
	
	//Paging + Slider Function
	rotate = function(){	
		var triggerID = $active.attr("rel") - 1; //Get number of times to slide
		var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

		$(".paging a").removeClass('active'); //Remove all active class
		$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
		
		//Slider Animation
		$(".image_reel").animate({ 
			left: -image_reelPosition
		}, 500 );
		
	}; 
	
	//Rotation + Timing Event
	rotateSwitch = function(){		
		play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
			$active = $('.paging a.active').next();
			if ( $active.length === 0) { //If paging reaches the end...
				$active = $('.paging a:first'); //go back to first
			}
			rotate(); //Trigger the paging and slider function
		}, 7000); //Timer speed in milliseconds (3 seconds)
	};
	
	rotateSwitch(); //Run function on launch
	
	//On Hover
	$(".image_reel a").hover(function() {
		clearInterval(play); //Stop the rotation
	}, function() {
		rotateSwitch(); //Resume rotation
	});	
	
	//On Click
	$(".paging a").click(function() {	
		$active = $(this); //Activate the clicked paging
		//Reset Timer
		clearInterval(play); //Stop the rotation
		rotate(); //Trigger rotation immediately
		rotateSwitch(); // Resume rotation
		// Mein Addon...
		setLabel();
		return false; //Prevent browser jump to link anchor
	});	
	
});
</script>

So ich habe bei // Mein Addon... eine Zeile in den mir gegebenen Script eingefügt und zusätzlich noch ein div mit der id="testLabel" erstellt, das den Text anzeigen soll...
Das sind alle meine script-Tags außer jQuery.
Ergänzung ()

Achso vergessen... Alle Script in denen $("...") vorkommt können erst nach dem Einbinden von jQuery verwendet werden, da es ansonsten heißt, dass $ nicht definiert sei.
 
juhuuuuuuuuuu

funktioniert soweit, nur dass er anfangs ein "undefined" ausgibt und die texte sind noch nich ganz richtig zugeordnet, aber das bekomm ich hin.

wie mach ich jetzt noch mein undefined weg?

www.visavis-music.de/testpage.html
 
also, texte sind jetzt richtig zugeordnet (hab beim array statt mit 0 mit 1 angefangen....) aber nach dem laden der seite steht da noch "undefined" erst wenn ich dann auf vor und dann wieder auf zurück geklickt hab, steht der richtige text da. wie änder ich das noch?

grad gesehen, probier das mal aus, meine antwort war sozusagen zu spät, evlt
Ergänzung ()

also, zugeordnet is jetzt wie gesagt alles (curIndex+1 is offenbar das gleiche wie die zahlen im array ändern, soviel war mir klar ;)) aber das problem dass er nach dem laden "undefined" anzeigt ist noch zu lösen. was mach ich da am besten?
 
Entferne einfach das setLabel(), das in meinem/deinem selbst erzeugten Script-Bereich steht und schreibe stattdessen in das div direkt den Text des ersten Bildes. Sollte der einfachste Weg sein.
Ergänzung ()

Mir ist gerade aufgefallen, dass man das zweite setLabel() lieber in die rotate-Funktion am Ende schreiben sollte, damit das auch beim automatischen Weiterwandern funktioniert.
 
hab ich gemacht, aber dann geht garnixmehr:

Code: 
<script type="text/javascript">
<script type="text/javascript">
function getCurrentIndex(element, childs) {
	var curIndex;
	for (var i=0; i<childs.length; i++) {
		if (element == childs[i]) {
			curIndex = i;
			break;
		}
	}
	return curIndex;
}
function [B]setLabel()[/B] {
	with (document.getElementsByClassName("paging")[0]) {
		var activeChild = getElementsByClassName("active")[0];
		var childs = getElementsByTagName("a");
	}
	var curIndex = getCurrentIndex(activeChild, childs);
	document.getElementById("testLabel").textContent = bildbeschreibung[curIndex];
}
var bildbeschreibung = new Array(4) ;
bildbeschreibung[0] = "erster text zum bild";
bildbeschreibung[1] = "zweiter text zum bild";
bildbeschreibung[2] = "dritter text zum bild";
bildbeschreibung[3] = "vierter text zum bild";
$(document).ready(function() {
$("#nachlinks").click(function() {
	with (document.getElementsByClassName("paging")[0]) {
		var activeChild = getElementsByClassName("active")[0];
		var childs = getElementsByTagName("a");
	}
	var curIndex = getCurrentIndex(activeChild, childs) - 1;
	if (curIndex == -1) {
		childs[9].click();
	}
	else {
		childs[curIndex].click();
	}
});
$("#nachrechts").click(function() {
	with (document.getElementsByClassName("paging")[0]) {
		var activeChild = getElementsByClassName("active")[0];
		var childs = getElementsByTagName("a");
	}
	var curIndex = getCurrentIndex(activeChild, childs) + 1;
	if (curIndex == 10) {
		childs[0].click();
	}
	else {
		childs[curIndex].click();
	}
});
[B]setLabel();[/B]
});
</script>
<script type="text/javascript">

$(document).ready(function() {

	//Set Default State of each portfolio piece
	$(".paging").show();
	$(".paging a:first").addClass("active");
		
	//Get size of images, how many there are, then determin the size of the image reel.
	var imageWidth = $(".window").width();
	var imageSum = $(".image_reel img").size();
	var imageReelWidth = imageWidth * imageSum;
	
	//Adjust the image reel to its new size
	$(".image_reel").css({'width' : imageReelWidth});
	
	//Paging + Slider Function
	rotate = function(){	
		var triggerID = $active.attr("rel") - 1; //Get number of times to slide
		var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

		$(".paging a").removeClass('active'); //Remove all active class
		$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
		
		//Slider Animation
		$(".image_reel").animate({ 
			left: -image_reelPosition
		}, 500 );
		
	}; 
	
	//Rotation + Timing Event
	rotateSwitch = function(){		
		play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
			$active = $('.paging a.active').next();
			if ( $active.length === 0) { //If paging reaches the end...
				$active = $('.paging a:first'); //go back to first
			}
			rotate(); //Trigger the paging and slider function
		}, 7000); //Timer speed in milliseconds (3 seconds)
	};
	
[B]	rotateSwitch(); //Run function on launch[/B]
	
	//On Hover
	$(".image_reel a").hover(function() {
		clearInterval(play); //Stop the rotation
	}, function() {
		rotateSwitch(); //Resume rotation
	});	
	
	//On Click
	$(".paging a").click(function() {	
		$active = $(this); //Activate the clicked paging
		//Reset Timer
		clearInterval(play); //Stop the rotation
		rotate(); //Trigger rotation immediately
		rotateSwitch(); // Resume rotation
		// Mein Addon...
[B]		setLabel();[/B]
		return false; //Prevent browser jump to link anchor
	});	
	
});
</script>

da stehn 3 setLabel() drin, welches muss raus? alle?
und, noch ne frage: wenn ich rotate switch rauslösch, mag er auch nichmehr. wie deaktivier ich das autoplay?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Ähnliche Themen

D
C: Buffer-Element einem anderen Buffer-Element zuweisen
Antworten
3
Aufrufe
845
Defragger
D
WoisthierdasKlo
Videochatseite gibt Fehler an
Antworten
6
Aufrufe
4.042
Pfandfinder
Pfandfinder
cardinal
JavaScript DIV zu PDF konvertieren
Antworten
3
Aufrufe
2.604
Einhörnchen
E
V
Excel: Buchstaben Zahlen zuweisen
Antworten
9
Aufrufe
6.495
Mirakel
M
L
Wo liegt der Fehler in der Verlinkung?
Antworten
8
Aufrufe
1.537
Je_Tho
Je_Tho
Zurück
Oben

Willkommen auf ComputerBase!

Mit Werbung weiterlesen

Besuche ComputerBase wie gewohnt mit Werbung und Tracking. Die Zustimmung ist jederzeit widerrufbar.

Details im Privacy Center und in der Liste unserer Partner. Ein Widerruf ist möglich in der Datenschutzerklärung.

… oder ComputerBase Pro bestellen

Nutze ComputerBase ohne Werbebanner, Video-Ads und Werbetracking schon für 4 €/Monat oder 36 €/Jahr.

Mehr zu ComputerBase Pro

Bereits Pro-Nutzer? Hier anmelden.

Tracking: Wir und unsere 160 Partner verarbeiten personenbezogene Daten, indem wir mit auf Ihrem Gerät gespeicherten Informationen (z. B. eindeutige Kennungen in Cookies) ein Nutzungsprofil erstellen, um z. B. Anzeigen zu personalisieren. Verarbeitungszwecke: Genaue Standortdaten und Abfrage von Geräteeigenschaften zur Identifikation, Informationen auf einem Gerät speichern und/oder abrufen, Personalisierte Anzeigen und Inhalte, Anzeigen- und Inhaltsmessungen, Erkenntnisse über Zielgruppen und Produktentwicklungen.

Impressum Kontakt Datenschutz