kleine javascript gallerie

[janek]

guten morgen.

hallo ekki, hallo peter :)

so ich war in den letzten tagen mal wieder fleißig und habe nun ein neues problem. ich hab mir mit hilfe von css eine kleine gallerei gebastelt. soll heißen in einem div liegen circa zehn thunbs nebeneinander.

den div habe ich im css auf overflow:hidden gesetzt. wenn ich nun ein bild anklicke wird unter dem div das original eingeblendet. mit fade-in.

was ich vielleicht noch erwähnen sollte ich hab mit prototype und scriptacolous gearbeitet.

so weit so gut. funktioniert super.

jetzt mein problem:

wenn ich bei den thumbs zum bild ganz rechts scrolle und es anklicke wird das bild eingeblendet aber die gallerie springt wieder zurück an den anfang.

wie kann ich es lösen das sich (darf ich script sagen?)das script die position merkt?

ich hoffe jemand versteht was für ein problem ich habe.

danke schon mal.

[EKKi]

Mahlzeit janek,

wenn ich bei den thumbs zum bild ganz rechts scrolle und es anklicke wird das bild eingeblendet aber die gallerie springt wieder zurück an den anfang.

Vermutlich befindet sich das Bild in einem Link, der einen http://de.selfhtml.org/html/verweise/projektintern.htm#anker@title=Anker anspringt ... und zwar vermutlich einen ganz bestimmten - nämlich einen leeren, so dass zum "Anfang" der Datei gescrollt wird. Ändere das. Ein Link ist ein Link ist ein Link. Ein Link, der nicht sinnvoll verlinkt, sollte kein Link sein. Auch andere Elemente als <a> können einen http://de.selfhtml.org/html/attribute/eventhandler.htm#uebersicht@title=onclick-Handler haben!

Genauer kann man das natürlich nur sagen, wenn Du Quellcode herausrückst bzw. einen Link zur Problemseite präsentierst.

MfG,
EKKi

[Janek]

also das ist mein html:

<div id="gallerie">

<div id="thumbs">
                    <img src="img/thb/thb_1.jpg" alt="thumb_1.jpg" />
                    <img src="img/thb/thb_2.jpg" alt="thumb_2.jpg" />
                    <img src="img/thb/thb_3.jpg" alt="thumb_3.jpg" />
                    <img src="img/thb/thb_4.jpg" alt="thumb_4.jpg" />
                    <img src="img/thb/thb_5.jpg" alt="thumb_5.jpg" />
                    <img src="img/thb/thb_6.jpg" alt="thumb_6.jpg" />
                    <img src="img/thb/thb_7.jpg" alt="thumb_7.jpg" />
                    <img src="img/thb/thb_8.jpg" alt="thumb_8.jpg" />
                    <img src="img/thb/thb_9.jpg" alt="thumb_9.jpg" />
                    <img src="img/thb/thb_10.jpg" alt="thumb_10.jpg" />
                </div>
                        <span id="span"> <!--<div id="big" style="display:none;"> --> </span></div>

</div>

das ist mein javascript:

document.observe('dom:loaded',init);

function init() {

var eins = $$('#thumbs img');  
  
for (i=0; i<eins.length; i++){  
  
eins[i].onclick = fade\_in;  
  
}  

};

function fade_in () {

$('span').innerHTML = '<div id="big" style="display:none;">' ;  
  
var zwei = this.alt;  
  
var drei = zwei.slice(6);  
  
var div= $('big');  
  
var bild = '<img src="img/original/'+drei+'">';  
  
div.innerHTML = bild;  
  
div.appear();  

};

function schreib() {
$('span').innerHTML = '<div id="big" style="display:none;">' ;
};

danke für die hilfe.

[JürgenB]

Hallo Janek,

<span id="span"> <!--<div id="big" style="display:none;"> --> </span></div>

$('span').innerHTML = '<div id="big" style="display:none;">' ;

du solltest dich mal informieren, welches Element in welchem liegen darf und wie man Element in Element verschachtelt. Was du suchst, ist <div><span>...</span></div>, wobei das innere <span> überflüssig ist. <span><div>...</span></div> ist falsch.

Wenn du Elemente ein- oder ausblenden möchtest, geht das über die display-Eigenschaft:

Ausblenden: e.style.display = "none";
Einblenden: e.style.display = "";

Gruß, Jürgen

[Felix Riesterer]

Lieber JürgenB,

<span id="span"> <!--<div id="big"

style="display:none;"> --> </span></div>

[...]
du solltest dich mal informieren, welches Element in welchem liegen darf und wie man Element in Element verschachtelt.

nicht nur das, sondern auch, welche Elemente für diesen Zweck sinntragend (semantisch) sind, und welche nicht. Dieser <div>-Wahn ist oft Unsinn. Das von mir verlinkte Beispiel ist eine mögliche Lösung. Eine Liste (<ul>) wäre ein zweites, das unter semantischen Gesichtspunkten wesentlich sinnvoller ist!

Was du suchst, ist <div><span>...</span></div>, wobei das innere <span> überflüssig ist. <span><div>...</span></div> ist falsch.

Das <div> ist ebenso "falsch", wie das <span> darin. Beides ist nämlich strukturell betrachtet Unsinn, formal aber korrekt.

Alles weitere könnte mein Artikel beantworten.

Liebe Grüße,

Felix Riesterer.

[Felix Riesterer]

Lieber janek,

ohne zu sehen, was Du getan hast, kann ich Dir nicht helfen. Ich kann Dich nur auf meinen Artikel verweisen (Beispiel-Galerie), der Dir die Galerie auch ohne scriptaculous oder prototype ermöglicht, indem Du einfach die Grundlagen nutzt.

Liebe Grüße,

Felix Riesterer.

[JürgenB]

Hallo janek,

... eine kleine gallerei gebastelt ...

igitt, wäre das nicht eher was fürs "Metzger-Forum"?

Gruß, Jürgen