Keskustelu: Nettisivujen teko: Javascript tekstiruutu

Yrittelin saada javascriptillä sivulla olevaa tekstiä ylös tekstiruuduksi, vähän samaan tapaan kuin "css-popup".
Minulla on pikkufunktio, joka tulostaa kuvan sekä kuvatekstin.

document.write pomppaa ruudun tyhjäksi. Miten tuon voisi estää?

tee oma div-laatikko, jonka sisälle kirjoitat (esim. innerHTML:llä ).

Käytä vaikka innerHTML:ää. document.write on ollut jo pitkään "älä käytä koskaan" -asioiden listalla. innerHTML taas tullaan standardisoimaan HTML5:ssä.

Jep.

Pitääpä kokeilla. Minulla onnkin tuossa kuvan ympärillä div-ruutu. Funktio avataan pienemmässä kuvassa olevalla onclick-toimimmolla. En tiedä, onko tämä oikeaoppista. En ole opetellut ollenkaan ajaxia, sillä joudun tulostamaan tuon javascript-funktion php:lla, jolla olen hakenut siihen oikean kuvapolun ja oikean kuvatekstin tiedostoista.

Mutta onnistuu se ehkä näinkin.

Opetteluksi meni.

Koodi on tällainen:

<script type="text/javascript">
                    function Isokuva237(){
                    document.getElementById('kuva237_1').innerHTML="<div id='isompikuva' style='height:420px'><img src='photos/237_1.jpg' alt='237_1.jpg'/><div class='sulje'><a href='test.php'>Sulje</a></div><div class='kuvateksti'>Teksti</div></div>";
}
</script>
<img id="kuva237_1" src="photos160/237_1.jpg" alt="1" onclick="Isokuva237();"/>

IE valittaa, että "tuntematon suorituksenaikainen virhe". Tietäisikö joku IE:tä paremmin tuon virheen?

Kun testasin tuota linkistä, se toimi, mutta sivu ei saa nousta ylös. Esim. jos klikkaa rivillä 30 (kunkin rivin korkeus n. 3cm), isompi kuva tulisi aueta suunnilleen tuon rivin päälle (eli taustan ei tule liikkua).

Ps. Testailin uudelleen linkillä <a href="#" ....
Nyt se pysyy auki vain pari sekuntia. Ja edelleen on tuo sivun "pomppaus" juttu

onclick="Isokuva237(); return false;"

itse loisin getElementById:n omaan väliaikaiseen muuttujaan ja tutkailisin, että muuttuja varmasti löytyy, ennen kuin alkaisin innerHtml:llä luomaan sille sisältöä.

jos tarkoituksena on vain näyttää kuvia kuvateksteineen, niin suosittelen lämpimästi valmiita lightbox -kikkareita.

Kiitos!

Tuohan olikin mainio kikkare:)
Mitenkähän tuohon vielä saisi kuvatekstin poimittua tiedostosta?

Ps. siinä on asetuksena kuvateksti "Image 4 of 7" tyyliin.

Ps 2: Tuo teksti ja boxin muotoilu näyttäisi tulevan tuolta.

LightboxOptions = Object.extend({
    fileLoadingImage:        'images/loading.gif',
    fileBottomNavCloseImage: 'images/closelabel.gif',

    overlayOpacity: 0.8,   // controls transparency of shadow overlay

    animate: true,         // toggles resizing animations
    resizeSpeed: 7,        // controls the speed of the image resizing animations (1=slowest and 10=fastest)

    borderSize: 10,         //if you adjust the padding in the CSS, you will need to update this variable

	// When grouping images this is used to write: Image # of #.
	// Change it for non-english localization
	labelImage: "Image",
	labelOf: "of"
}, window.LightboxOptions || {});

Eli tuohon labelImageen pitäisi saada poimittua teksti tiedostosta, jonka nimi on sama kuin kuvalla, mutta pääte .txt

laita suosiolla vaan imagen titleen se kuvateksti, niin ainakin nopeasti katsottuna teksti siirtyy avatun ison kuvan kuvatekstiin.

Ahaa..... tuohan olisi helppo konsti. Täytyy kokeilla.

Ps. Ei toiminut.
Testikoodi pn tällainen:

<a href="photos/237_1.jpg"  rel="lightbox[roadtrip]">
<img src="photos160/237_1.jpg" title="Kittilä" alt="1"/>
</a>

Sikäli kuin ymmärsin, tuo title kuuluisi olla sen suuren kuvan titlessä, mutta tuota isoa kuvaa ei ole tulostettu muulla kuin tuolla tiedostossa lightbox.js

Sain tämän toimimaan. Tuosta ylläolevasta rel-argumentti pitää olla pelkkä "lightbox", jotta toimii.