Mala i velika slika na istoj stranici

Mala i velika slika na istoj stranici 07.08.2008. u 18:22 · pre 221 meseci #1

Postovani,

Vidjao sam ranije na internetu gde sa na stranici nalazi mala slicica i kada se klikne na nju pojavi se velika
ali se ne otvara novi prozor vec na istoj samo se centrira poozaj vece slike.

Da li neko moze da mi preporuci sajt gde postoji takav nacin prikazivanja slika pa da ja vidim kako je to uradjeno
ili da mi neko pokaze nacin na koji se to radi?

Pozdrav

Potpis

V.Sredojevic

Re: Mala i velika slika na istoj stranici 07.08.2008. u 21:54 · pre 221 meseci #2

Evo ti jedan banalan primer za to:

Code:

<html>
    <body>
        <img src = "malaSlika.jpg" onMouseOver = "this.src = 'velikaSlika.jpg'" onMouseOut = "this.src = 'malaSlika.jpg'" />
    </body>
</html>

Razlika je samo shto ovde ne ide na klik, nego na prelazak mishem...

Re: Mala i velika slika na istoj stranici 08.08.2008. u 08:37 · pre 221 meseci #3

U pitanju je Lightbox JS.
Pogledaj ovde: http://www.huddletogether.com/projects/lightbox2/

Potpis

Slika govori više od 128K reči.

Re: Mala i velika slika na istoj stranici 08.08.2008. u 10:26 · pre 221 meseci #4

A evo ovde mozhesh da preuzmesh Lightbox v1.5.

Re: Mala i velika slika na istoj stranici 08.08.2008. u 10:41 · pre 221 meseci #5

Nova verzija je v2.04
http://www.huddletogether.com/...box2/releases/lightbox2.04.zip

Potpis

Slika govori više od 128K reči.

Re: Mala i velika slika na istoj stranici 08.08.2008. u 12:59 · pre 221 meseci #6

Citat:

raynor: Evo ti jedan banalan primer za to:

Code:

<html>
<body>
<img src = "malaSlika.jpg" onMouseOver = "this.src = 'velikaSlika.jpg'" onMouseOut = "this.src = 'malaSlika.jpg'" />
</body>
</html>

Razlika je samo shto ovde ne ide na klik, nego na prelazak mishem...

To je kada se prevuce misem a kako ide na klik?

Jel umesto onMouseOver ide onClick ili je nesto drugo u pitanju?

Potpis

V.Sredojevic

Re: Mala i velika slika na istoj stranici 08.08.2008. u 19:23 · pre 221 meseci #7

E na klik bi vec moralo ovako neshto:

Code:

<html>
<head>
    <script language = "JavaScript">
        var niz = new Array(2);
        x = 1;

        niz[0] = new Image;
        niz[0].src = "malaSlika.jpg";

        niz[1] = new Image;
        niz[1].src = "velikaSlika.jpg";

        function promeni(){
            document.slika.src = niz[x].src;

            if (x == 1) {
                x = 0;
            }

            else if (x == 0){
                x = 1;
            }
        }
    </script>
</head>
<body>
    <img src = "malaSlika.jpg" name = "slika" onclick = "promeni()" />
</body>
</html>

Probaj, pa proceni shta ti se vishe dopada. Meni je nekako "elegantnija" ova varijanta sa prelaskom preko slike. Naravno, ako hocesh na profesionalan nachin da odradish to sa slikama, download-uj taj LightBox... Ovo shto sam ja napisao su samo neki osnovni nachini tranzicije izmedju slika, koji mogu da se doteraju kako bi izgledali lepshi za oko.

Pozdrav!

Re: Mala i velika slika na istoj stranici 09.08.2008. u 15:02 · pre 221 meseci #8

To je to!!!

Hvala, care

Potpis

V.Sredojevic

Re: Mala i velika slika na istoj stranici 09.08.2008. u 15:44 · pre 221 meseci #9

Nema na chemu, i drugi put.

Re: Mala i velika slika na istoj stranici 09.08.2008. u 18:29 · pre 221 meseci #10

E, znas sta sam jos hteo da pitam, da li je moguce da
slika koja se nakon klika misem uveca,da se pomeri malo u stranu

Znaci kada kliknes misom na malu sliku,da se pojavi veca slika
ali na primer u sredini stranice?

Potpis

V.Sredojevic

Re: Mala i velika slika na istoj stranici 09.08.2008. u 20:58 · pre 221 meseci #11

Pa i za to ima dosta varijanti, al' evo recimo da modifikujem onaj moj prethodni kod:

Code:

<html>
<head>
    <script language = "JavaScript">
        var niz = new Array(2);
        x = 1;

        niz[0] = new Image;
        niz[0].src = "malaSlika.jpg";

        niz[1] = new Image;
        niz[1].src = "velikaSlika.jpg";

        function promeni(){
            document.slika.src = niz[x].src;

            if (x == 1) {
                x = 0;
                document.getElementById('polje').align = "center";
            }

            else if (x == 0){
                x = 1;
                document.getElementById('polje').align = "right";
            }
        }
    </script>
</head>
<body>
    <div id = "polje" align = "right">[/b]<img src = "malaSlika.jpg" name = "slika" onclick = "promeni()" /></div>
</body>
</html>

Ovo je samo prost primer, ti naravno mozhesh da ga modifikujesh prema svojim potrebama...

_{[Ovu poruku je menjao raynor dana 10.08.2008. u 12:41 GMT+1]}

_{[Ovu poruku je menjao raynor dana 10.08.2008. u 12:41 GMT+1]}

_{[Ovu poruku je menjao raynor dana 10.08.2008. u 12:41 GMT+1]}

Srodne teme