zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Bildergalerie

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 31.03.2009, 15:26
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 31.03.2009
Beiträge: 3
Holzwurm01 befindet sich auf einem aufstrebenden Ast
Unglücklich Bildergalerie

Ersatmal Hallo zusammen!

leider versuche ich seit langem eine anständige galerie für meinen Shop zu erstelle. Ich habe mich bereits vergebens durch etliche Foren gelesen, leider ohne erfol. Vileicht liegt es einfach auch nur daran, das ich noch Anfänger bin und etwas überlese.
Nun zum eigentlichen Problem der Galerie, oben ist ein Artikelbild in Groß darunter bis zu 6 weitere kleine ohne thb erstellt zu haben.
Beim anklicken öffnen die kleinen sich auch richtig, allerdings springt dabei die Seite wieder an den Seitenanfang. Ich möchte nun, das sich nur das Bild ändert ohne das sich die Seite ändert.
Kann mir jemand sagen was ich falsch gemacht habe!

Hier mal der Code dazu:
ul {
margin: 10px 0 0 0;
padding: 0;
}
Li
{
display: inline;
width:460px;
height:460px;
margin: 0 5px 0 0;
}
a img {
border: 0;
width:80px;
height:80px;
}

<script type="text/javascript">
<!--
// Image-Preloader
image1 = new Image();
image1.src = "pic01.jpg";
image2 = new Image();
image2.src = "pic02.jpg";
image3 = new Image();
image3.src = "pic03.jpg";
image4 = new Image();
image4.src = "pic04.jpg";
image5 = new Image();
image5.src = "pic05.jpg";
// swapImage
function swapImage(imgName,swapImg)
{
document.images[imgName].src=swapImg;
}
//-->
</script>
<div id="imageBox"><img src="http://www.daswohnambiente.de/ebay/taek1.jpg" alt="Artikelbild" name="start" /></div>
<ul>
<li><a href="#" onclick="swapImage('start','http://www.daswohnambiente.de/ebay/teak1.jpg')"><img src="http://www.daswohnambiente.de/ebay/taek1.jpg" alt="Lade Bild" width="100" height="100"></a></li>
<li><a href="#" onclick="swapImage('start','http://www.daswohnambiente.de/ebay/teak2.jpg')"><img src="http://www.daswohnambiente.de/ebay/teak2.jpg" alt="Lade Bild 2" width="100" height="100"></a></li>
<li><a href="#" onclick="swapImage('start','http://www.daswohnambiente.de/ebay/teak3.jpg')"><img src="http://www.daswohnambiente.de/ebay/teak3.jpg" alt="Lade Bild 3" width="100" height="100" /></a></li>
<li></li>
<li></li>
</ul>

Ansehen könnt Ihr euch das unter Onlineshop von Das Wohnambiente
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 31.03.2009, 15:40
No Risk no Fun
neuer user
 
Registriert seit: 18.01.2009
Ort: Wien
Beiträge: 10
ZeroQL befindet sich auf einem aufstrebenden Ast
Standard

So wie ich das sehe wird durch das Klicken auf ein Bild deine Seite neu geladen (da Du ein leeren Link verwendest), wie wäre es wenn Du mal versucht anstatt onclick, mouseover zu verwenden?

Ich kann zwar grad nicht versprechen ob es funktioniert aber ein Test wäre es wert oder
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 31.03.2009, 15:53
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 14.03.2007
Ort: Bad Schmiedeberg
Beiträge: 1.397
regloh wird schon bald berühmt werden
Standard

Das passt wohl ehr ins JavaScript-Forum. Du musst per JS verhindern, dass der eigentliche Link ausgeführt wird. Dass ist der Teil im href-Attribut. Das erreichst du, indem du vom JS "return falsse" zurückgibst. D.h., dass z.B. das die Linkausführung verhindert:

HTML-Code:
<a href="#" onclick="return false;">test</a>
Das Problem daran ist aber, dass deine Bilder bei ausgeschaltetem JS nicht angezeigt werden und der Browser nur nach oben springt. Besser wäre es, wenn du in "href" den richtigen Bildlink einfügst und bei eingeschaltetem JS wird dieser Teil nicht ausgeführt und ohne JS zeigt er dein Bild ganz normal an.

Geändert von regloh (31.03.2009 um 15:56 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 31.03.2009, 16:23
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 31.03.2009
Beiträge: 3
Holzwurm01 befindet sich auf einem aufstrebenden Ast
Standard

leider habe ich von js gar keine ahnung
habe deshalb schon nach einer html gallerie gesucht die das kann
Auch Lightbox funktioniert nicht mit meiner Site.

Andere Idee?
Mit Zitat antworten
  #5 (permalink)  
Alt 31.03.2009, 17:17
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 14.03.2007
Ort: Bad Schmiedeberg
Beiträge: 1.397
regloh wird schon bald berühmt werden
Standard

Zitat:
leider habe ich von js gar keine ahnung
Wieso arbeitest du dann aber mit JS, wenn du nicht weißt, was du tust :P

Zitat:
habe deshalb schon nach einer html gallerie gesucht die das kann
Was genau muss die Galerie denn können? Mittels HTML kannst du die Thumb-Links einfach in einer Liste packen und per Klick öffnen diese sich entweder im gleichen oder in einem neuen Fenster. Ist doch nicht weiter schwer. Für das hübsche Aussehen und die Formatierung ist dann CSS da.

Zitat:
Auch Lightbox funktioniert nicht mit meiner Site.
Wieso nicht? Lightbox ist aber auch keine Galerie, sondern zeigt lediglich die Bilder in diesem chicen Rahmen mit abgedunkelten Hintergrund an.
Mit Zitat antworten
  #6 (permalink)  
Alt 01.04.2009, 08:50
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 31.03.2009
Beiträge: 3
Holzwurm01 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Wieso arbeitest du dann aber mit JS, wenn du nicht weißt, was du tust :P

Weil es sich um eine Umgebaute Shop seite handelt, die JS beinhaltet.

Zitat:
Was genau muss die Galerie denn können?

Oben ein großes Bild (max. 460 x 460 px)
Darunbter bis zu sechs kleine Bilder ohne thb erstellen zu müssen.
Wenn die kleinen angeklickt oder mit der Maus darauf steht soll das große gegen das kleine ausgetauscht werden. Es ist nicht zwingend notwendig, das dass Startbild wieder auftaucht.

Zitat: Lightbox
Ist Java und verträgt sich nicht mit der aktuellen Java Datei meiner Shopseite - Warum weiß ich leider nicht.

ZUsätzlich soll die Galerie auch in die Ebay html eingebaut werden und der TL schreit wenn ich JS einbaue.

Kannst dir den Shop ja mal ansehen: Onlineshop von Das Wohnambiente

Vorab schon mal vielen Dank
Mit Zitat antworten
  #7 (permalink)  
Alt 01.04.2009, 11:44
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 14.03.2007
Ort: Bad Schmiedeberg
Beiträge: 1.397
regloh wird schon bald berühmt werden
Standard

Zitat:
Weil es sich um eine Umgebaute Shop seite handelt, die JS beinhaltet.
Hmm - OK. In solche Systeme muss man sich erstmal einarbeiten. Aber selbst wenn der Shop JS verwendet, heißt das ja nicht, dass du eine Galerie mit JS erstellen musst

Zitat:
Oben ein großes Bild (max. 460 x 460 px)
Darunbter bis zu sechs kleine Bilder ohne thb erstellen zu müssen.
Wenn die kleinen angeklickt oder mit der Maus darauf steht soll das große gegen das kleine ausgetauscht werden. Es ist nicht zwingend notwendig, das dass Startbild wieder auftaucht.
Du könntest mal hier schauen: Stu Nicholls | CSSplay | A Photograph Gallery
Da wird nur mit CSS gearbeitet.
Was meinst du mit "[...] ohne thb erstellen zu müssen." ? Du willst keine Thumbnails per Hand erstellen sondern das soll die Galerie selbst machen? Das kannst du nicht mit CSS/HTML/JS machen. Dazu musst du mit PHP (oder sonstigen serverseitige Scriptsprachen) arbeiten. Wenn du also ein Bild z.B. per Formular hochlädst, muss PHP gleich den Thumbnail erstellen.
Evtl. arbeitet dein Shopsystem auch mit Modulen. Dafür könntest du dir dann also ein Galerie-Modul selbst schreiben, was sich dann leichter einbauen und pflegen lässt. Für Wordpress z.B. verwende ich ein freies Galerie-Modul, was mir nach dem Hochladen die Thumbs erstellt und die einzelnen Galerien verwaltet. Recht praktisch.

Zitat:
Kannst dir den Shop ja mal ansehen: Onlineshop von Das Wohnambiente
Du solltest die großen Bilder alle in der gleichen Größe haben. So wie es jetzt ist, klickt man auf das kleine Bild, es wird oben groß angezeigt, aber man muss u.U. viel weiter runterscrollen und der Inhalt springt.
Mit Zitat antworten
Antwort

Stichwörter
bilder, bildergalerie, css, galerie, image

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
Bildergalerie in Liste oder Div packen? schogette CSS 11 10.08.2009 12:39
hasLayout Problem mit "Ulles" hover Bildergalerie regioprint CSS 7 17.03.2008 10:45
Probleme mit Bildergalerie Lili0312 Site- und Layoutcheck 3 03.03.2007 14:35
erstes bild direkt anzeigen --> bildergalerie las CSS 9 21.07.2006 15:57
Formatierung einer Bildergalerie picco CSS 0 12.07.2005 12:42


Alle Zeitangaben in WEZ +2. Es ist jetzt 00:47 Uhr.