zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden simple kleine bildergalerie

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 17.03.2013, 05:02
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.01.2012
Beiträge: 13
boogy befindet sich auf einem aufstrebenden Ast
Standard simple kleine bildergalerie

Hallo,
ich versuche seit tagen eine kleine bildergalerie zu bauen aber ich schaffe es einfach nicht.

ich habe auch eine galerie mit html und css auch geschafft aber das möchte ich nicht, weil ich für jedes vorschaubild extra ein bild hochladen müsste + mainbilder.

Habe ein Bild hochgeladen was ich überhaupt vorhab. es sollte ein grosses Bild mainbild in der mitte sein in grossformat und daneben 2 kleine vorschaubilder, wenn man auf die vorschau bilder rüberfährt mit der Maus sollte sich das mittlere grosse bild das anzeigen was auf dem kleinen vorschaubild zu sehen ist (thumbnail)--> wird mainbild.

Habe jetzt noch ein Bild hochgeladen damit ihr wisst was ich meine.


Uploaded with ImageShack.us

und hier der code was ich nicht verstehe und zu verstehen versuche wo finde ich den javascript code (da sind id`s ) die muss ich glaube ich im javascript eingeben damit das funktioniert :

HTML-Code:
<div id="slider">
                
                <div id="grossBild"> 
                                    <!-- Das erste main bild --> 
                                    <img name="main bild" id="habe ich nicht" src="../bilder/mainbild.jpg"> 
                                
                                  </div>
                  <!-- hier der div wo die kleinen thumbnails Vorschau bilder kommen weis aber nicht wie javascript geht -->
                <div id="kleinbild">
                
                
                <a onmouseover="document.grossbild.src='bilder/bild1.jpg'; return false;"> 
               
                     <img onmouseover="[B]wo ist der javascript code?[/B]" id="[B]finde ich nicht[/B]" src="url vom kleinen bild1"></a> 
                     
                     <br />
                           
                <a onmouseover="document.grossbild.src='bilder/bild2.jpg'; return false;"> 
               
                     <img onmouseover="[B]was schreibe ich hierrein?[/B]" id="[B]habe ich nicht[/B]" src="url vom kleinen bild2"></a> 
                 </div>
                
              
                </div>

Kenn mich mit javascript überhaupt nicht aus, und weiss nicht mehr weiter.
Ich würde mich freuen wenn mir jemand helfen würde, eine kleine Spende für den Forum würde ich als dankeschön hinterlassen wollen.

Habt alle vielen Dank jetzt schonmal habe seit gestern nicht schlafen können.

Danke nochmals


MFG

Geändert von boogy (17.03.2013 um 05:10 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 18.03.2013, 09:49
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.01.2012
Beiträge: 13
boogy befindet sich auf einem aufstrebenden Ast
Standard

Ich habe jetzt viel gelesen was ich nicht verstehe ist wenn ich javascript sehe denke ich es gibt immer ein ordner mit den namen javascript wo das javascript drin ist.

Jetzt habe ich paar tutorials geschaut und dort ist das javascript im html dokument drinnen ohne externe js dateien.

Deswegen bin ich so durcheinander.... ich bin am lernen und habe diese jetzt dank tuts im internet mal nachgebaut, im firefox und internet exlplorer getest zeigt auch alles an.
Aber beim Safari zeigt es nicht an wieso ? Es ist doch ein javascript befehl drinnen ?

Weil sonst könnte ich gleich auf javascript verzichten und nur mit html und css reallisieren aber dort gibt es probleme beim ie und chrome + thumbnail bilder müsste ich über css laden. Deswegen wollte ich eine bildergalerie mit js.

Hier mal der code wo es bei firefox u.ie funktioniert aber bei safari nicht:

HTML-Code:
<head>


<style type="text/css">
body {
background: #222;
margin-top: 20px;
}

h3 {
color: #eee;
font-family: Verdana;
}

.thumbnails img {
height: 80px;
border: 4px solid #555;
padding: 1px;
margin: 0 10px 10px 0;
}

.thumbnails img:hover {
border: 4px solid #00ccff;
cursor:pointer;
}

.preview img {
border: 4px solid #444;
padding: 1px;
height: 171px;
width:256px;
}
</style>

</head>




<body>

<div class="gallery" align="center">
<h3>  JavaScript Bilderaustausch mit thumbnail</h3><br/>

<div class="thumbnails">
	<img onmouseover="preview.src=bild1.src" id="bild1" src="bilder/1.png" alt="Image Not Loaded"/>
	<img onmouseover="preview.src=bild2.src" id="bild2" src="bilder/2.png" alt="Image Not Loaded"/>
	<img onmouseover="preview.src=bild3.src" id="bild3" src="bilder/3.png" alt="Image Not Loaded"/>
	<img onmouseover="preview.src=bild4.src" id="bild4" src="bilder/4.jpg" alt="Image Not Loaded"/>

</div><br/>

<div class="preview" align="center">
	<img id="preview" src="bilder/1.png" alt="kein Bild gelden"/>
</div>

<br/>

</div>
</body>

Es würde mich freuen wenn jemand dazu was sagen möchte oder, wie ich bei mein vorhaben wie auf dem 1.post gezeigten (Screen )Bldergalerie realisieren kann.


MfG

Geändert von boogy (18.03.2013 um 10:00 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 18.03.2013, 10:58
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

Wir helfen hier alle »ehrenamtlich«. Über eine Spende würde sich der Admin aber sicher dennoch freuen. Egal, erstmal was zu den Grundlagen.

Zuerst würde ich dir dringend empfehlen, die ganze Logik (Javascript) aus der Präsentation (HTML) heraus zu lösen und in ein separates JS-File (oder wenigstens in ein Script-Element im Header zu schreiben. So wird das ganze übersichtlicher und wartbar:

JS
Code:
window.addEventListener(
	'load',
	function() {
		//hier kommt dein Code hin
	}
);
HTML:
HTML-Code:
<div id="slider">
	<div id="grossBild">
		<!-- Das erste main bild -->
		<img name="main bild" id="img-full-size" src="../bilder/mainbild.jpg">

	</div>
	<div id="kleinbild">
		<a class="thumbnail" href="url/vom/großen/bild1.jpg">
			<img src="url/vom/kleinen/bild1.jpg">
		</a>
		<!-- analog weitere Thumbnails hinzufügen -->
	</div>
</div>

Anschließend vergibst Du IDs und Klassennamen so, dass diese die Funktion des Elements kurz und präzise beschreiben und der Code (JS und HTML) so lesbar wird. (Entscheide dich aber für eine Sprache und zieh die dann durch. Also entweder main-image oder haupt-bild aber nicht mainbild.

Klassen sind überall da sinvoll, wo Funktionalitäten sehr ähnlich sind. Also die Link-Elemente um die Thumbnails (Vorschaubilder).

Mit den Methoden document.getElementById() und document.getElementsByClassName() bekommst Du Zugriff auf die DOM-Elemente. Die Links würdest Du allso über den Klassennamen auf einmal Auswählen, dann auf jeden Link einen Event-Listener registrieren. Das ist eine Funktion, die Aufgerufen wird, wenn das spezielle Event (in deinem Fall Mouseenter) von diesem Element ausgelöst wird.

Beispiel:
Code:
window.addEventListener(
	'load',
	function() {
		var trigger = document.getElementsByClassName( 'trigger' );
		for ( index in trigger ) {
			var link = trigger[ index ];
			if ( 'undefined' == typeof link.nodeName || 'A' != link.nodeName )
				continue;
			
			// für jeden Link eine Funktion registrieren, die das Bild ändert.
			link.addEventListener(
				'mouseenter',
				function () {
					//this verweist auf das auslösende Element. Darüber kommst Du
					//an die URL des nächsten Bildes heran.
				}
			);
		}
	}
);
In der Funktion musst Du nur noch die einzelnen Attribute (href-Attribut des Links ist die URL des neuen, großen Bildes) auslesen und zusammen setzen.

(Der o.g. Code funktioniert nur in modernen Browsern. Für (ältere) IEs musst Du Krücken verwenden. Wenn Du den Code aber nachvollziehen kannst, dann kannst Du auch anfangen, jQuery o.ä. einzusetzen, denn die Arbeiten ähnlich. Nur dass du dir damit kaum Gedanken um Browsermodelle machen musst.)
__________________
github | http://dnaber.de

Geändert von David (18.03.2013 um 11:03 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 25.03.2013, 14:44
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 01.06.2006
Beiträge: 622
Rico wird schon bald berühmt werden
Standard

>>Kenn mich mit javascript überhaupt nicht aus, und weiss nicht mehr weiter.

wenn du dich mit JS nicht auskennst, warum nimmst du dann nicht ein fertiges Script aus dem Web? Es gibt jede Menge davon, die deinen Vorstellungen etwa entsprechen könnten. z.B.
Image slideshow with vertical filmstrip.
Beschreibung unter : Image Slideshow With Vertical Filmstrip

Rico
Mit Zitat antworten
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
Css basierte Bildergalerie Relühcs CSS 6 11.04.2012 18:44
Simple Accordion und jQuery.ScrollTo gleichzeitig verwenden? bleny87 Javascript & Ajax 3 24.05.2011 20:08
hasLayout Problem mit "Ulles" hover Bildergalerie regioprint CSS 7 17.03.2008 11:45
Probleme mit Bildergalerie Lili0312 Site- und Layoutcheck 3 03.03.2007 15:35
Extra Stylesheet für kleine Bildschirme (ohne Javascript) beginners CSS 9 03.01.2006 15:34


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