Pomoc:pravljenje galerije slika

[ tina 92 @ 01.02.2011. 20:51 ] @

Pozdrav svima...

zamolila bih vas za pomoc

pravim web sajt za maturski rad iz programiranja...zelela bih da u njega ubacim galeriju,neku prostiju,tj zelela bih da je napravim. implementacija vec postojecih sa interneta nije dozvoljena,pa mi pomoc zato i treba
da li znate neki dobar tutorijal,imate li neki dobar savet,ili ako vas ne mrzi,mozete li mi na primeru pokazati kako bih istu mogla da napravim?

snalazim se prilicno sa htmlom,radim u dreamweaveru,ali javascript i flash nikada nisam koristila...

hvala na odgovorima unapred....

pozdrav

[ mish_ns @ 01.02.2011. 21:26 ] @

Kako odprilike treba da izgleda galerija?
Moze jednostavno da se uradi sa javascriptom i CSS-om...

[ tina 92 @ 01.02.2011. 21:41 ] @

sto se mene tice,sto jednostavnije....moze,a i ne mora da bude nesto poput slideshowa.....

svaciji predlog je dobro dosao,pa ti sad predlozi ono za sta mislis da je jednostavno a lepo...hvala ti puno :)

[ tina 92 @ 01.02.2011. 21:43 ] @

nesto najjednostavnije,jer dream nece da mi prihvati da jednostavno poredja slike jeednu pored druge.....nesto poput najprostijeg slideshow-a,klikom na strelicu levo ili desno prelazi sa jedne na drugu sliku ili sl.

[ mish_ns @ 01.02.2011. 21:55 ] @

E onda ovako :)

Napravis javascript file script.js:

Code:

// JavaScript Document
window.onload = initAll;
var iSlika = 0;
var captionText = new Array(
     "Opis slike 1",
     "Opis slike 2",
     "Opis slike 3"
    )

function initAll() {
     document.getElementById("imgText").innerHTML = captionText[0];
     document.getElementById("prevLink").onclick = Prethodna;
     document.getElementById("nextLink").onclick = Sledeca;
}

function Prethodna() {
     novaSlika(-1);
}
function Sledeca() {
     novaSlika(1);
}

function novaSlika(direction) {
     var imgCt = captionText.length;

     iSlika = iSlika + direction;
     if (iSlika < 0) {
        iSlika = imgCt-1;
     }
     if (iSlika == imgCt) {
        iSlika = 0;
     }
     document.getElementById("slideshow").src = "images/slika" + iSlika + ".jpg";
     document.getElementById("imgText").innerHTML = captionText[iSlika];
}

Sad se malo potrudis oko CSS-a i HTML/a...
Znaci, pogledaj dobro sta ti treba od id-eva u CSS-u, i gde ces da stavljas slike i kako da ih nazivas :)
Ako negde zapne javi...

[ tina 92 @ 01.02.2011. 22:02 ] @

zjuuuuuuuuuuuuuuu hvala puno!!!

videcu sta cu da uradim pa cimam ako treba pomoc :)

[ tina 92 @ 03.02.2011. 10:46 ] @

uradila sam css,ali se ne snalazim oko toga kako da ovaj javascript iskoristim u html-u........

[ mish_ns @ 03.02.2011. 15:56 ] @

Ok...
posto imas u .js fajlu getElementById(id), znaci i da u html-u trebas imati odgovarajuce id-eve.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
     <title>Moja galerija</title>
     <link rel="stylesheet" href="nazivtvogcssfajla.css" />                                            
     <script type="text/javascript" language="javascript" src="nazivtvogjsfajla.js">                   
     </script>
</head>
<body>
     <h1>Maturske slike - Galerija</h1>
     <img height="240" width="320" src="images/slika1.jpg" alt="mat. slika 1"
id="slideshow" />
     <div id="imgText">   </div> 
     <br clear="all" />
     <form action="#">
        <input type="button" id="prevLink" value="« Previous" />
        <input type="button" id="nextLink" value="Next »" /> 
     </form>
</body>
</html>

Nadam se da sam ti bar malo pojasnio...Samo treba da razumes vezu izmedju npr. id="slideshow" i document.getElementById("slideshow").src = "images/slika" + iSlika + ".jpg"; itd.

[ tina 92 @ 03.02.2011. 16:02 ] @

aha,ok,mislim da razumem.i sve slike koje zelim da stoje u galeriji,stavljam ovako

Code:
<img height="240" width="320" src="images/slika1.jpg" alt="mat. slika 1"
id="slideshow" />

i to jednu ispod druge,tj sledecu u sld redu,zar ne?

[ mish_ns @ 03.02.2011. 16:06 ] @

Vidis u html-u da <img> tag koji sadrzi sliku ima id="slideshow"

to znaci da ce ovaj kod
document.getElementById("slideshow").src = "images/slika" + iSlika + ".jpg";
menjati samo src atribut kada se klikne na neko dugme. Sto znaci da ne treba i ostale slike dodavati jer bi onda sve bile vidljive na stranici...
S ovim postizes da koristis samo jedan <img> tag i da menjanjem src atributa vrtis slike...

Nadam se da sam koliko toliko uspeo da ti objasnim...

[ tina 92 @ 03.02.2011. 16:24 ] @

hm,ne radi.....klikom na dugme next se ne desava nista...slike sam nazvala redom slika 1,slika2,slika3......

[ mish_ns @ 03.02.2011. 16:32 ] @

A jesi napravila folder images, i u njega stavila slike?
Slike moraju biti u .jpg formatu.

[ tina 92 @ 03.02.2011. 16:37 ] @

da.nisu jpg,ali su jpeg.da li to smeta?koliko znam,vecina programa koji prihvataju jpg prihvataju i jpeg

[ mish_ns @ 03.02.2011. 16:41 ] @

Ne bi trebalo da smeta.
Ajd postavi kodove, pa da vidimo kako si uradila.

[ tina 92 @ 03.02.2011. 16:46 ] @

ovo je html kod

Code:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lovacka oprema Sangaj-Naslovna</title>
<link href="stil.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript" src="galerija.js">
     </script>
<style type="text/css">

</style>
</head>

<body bgcolor="#88BB55";>
<div id="box1">

<div id="logo">
        <div id="header">
               <div id="ime_sajta">LOVAČKA OPREMA ŠANGAJ</div>
            <div id="slogan">DOBRODOŠLI!</div>
        </div>

    </div>
<div id="sadrzaj">
<div id="meni">
<div class="meni01">
<div class="meni_lista">
<ul class="stil1"><a href="index.html">Naslovna</a>
</ul>
<ul class="stil2"><a href="onama.html">O nama</a></ul>
<ul class="stil2"><a href="download.html">Download</a></ul>
<ul><a href="galerija.html">Galerija</a></ul>
<ul>
  <a href="onlineporucivanje.html">Online poručivanje</a>
</ul>
<ul><a href="linkovi.html">Linkovi</a></ul>
<ul><a href="kontakt.php">Kontakt</a></ul>
</div>
</div>
</div>
</div>
</div>
<div id="sadrzaj">
<div id="box01">
<div class="centar">
  <h2><center>Slike prodavnice </center></h2>
<img height="240" width="320" src="images/slika1.jpg" alt="slika 1" id="slideshow" />

     <div class="box01">   </div>
     <br clear="all" />
     <form action="#">
        <input type="button" id="prevLink" value="« Previous" />
        <input type="button" id="nextLink" value="Next »" />
     </form>
</div>
</div>
</div>
<div id="sadrzaj">
<div id="footer">
Copyrigth ©2011. Lovačka oprema Šangaj | Designed by: <a href="mailto:[email protected]">Krstina Veljovic </a></div>
</div>
</body>

ovo css

Code:

@charset "utf-8";
/* CSS Document */
body {
    margin: 0;
    padding: 0;
    line-height: 1.4em;
    font-family: Arial Black, Arial, Times New Roman;
    font-size: 13px;
    background-color:#88DD44;
    color: #C7E39A;
}

a:link, a:visited { color: #333333; text-decoration: none;}
a:active, a:hover { color: #333333; text-decoration: underline;}

h1 {
    margin: 0 0 5px 0;
    padding: 3px 0 3px 10px;
    font-size: 24px;
    font-weight: normal;
    color: #888E3B;
    background: #C7E39A;
}

h2 {
    margin: 0 0 10px 0;
    padding: 3px 0 3px 10px;
    font-size: 22px;
    color: #000000;
    background-image: url(images/velikimenipozadina.gif);
}

h3 {
    letter-spacing: 0px;
    margin: 0;
    padding: 3px 0 3px 10px;
    font-size: 16px;
    font-weight: normal;
    color: #888E3B;
    background: #C7E39A;
}

h4 {
    margin: 0 0 10px 0;
    padding: 0;
    font-size: 14px;
    font-weight: normal;
    color: #888E3B;
    background: #C7E39A;
}

h5 {
    margin: 0 0 5px 0;
    padding: 0;
    font-size: 10px;
    font-weight: normal;
    color: #000000;
    background-image: url(images/velikimenipozadina.gif);
}

p {
    margin: 0 0 15px 0;
    background-color: #;
}

img {
    border: 3 px;
    margin: 20 px;
    border-color: #000;
    padding: 10 px;
}
.cleaner {
    clear: both;
    width: 100%;
    height: 1px;
}

.cleaner_with_height {
    clear: both;
    width: 20%;
    height: 30px;
}

#box1 {
    margin: auto;
    width: 960px;

}
#logo
{
    width: 960px;
    height: 120px;
    margin: 0;
    padding: 0;
    background: #003 url(images/templatemo_top_panel_background.jpg) no-repeat;
}
#header {
    float: left;
    display: inline;
    margin: 15px 0 0 30px;
}

#header #ime_sajta{
    padding: 10px 100px 10px 50px;
    margin: 0;
    color: #660;
    font-size: 50px;
    font-weight: bold;
    background: none;
}

#header #slogan{
    padding-left:350px;
    margin: 0;
    color: #660;
    font-size: 20px;
    font-weight: bold;
}

#sadrzaj
{
    width: 960px;
    margin-bottom: 25px;
}

#sadrzaj #levo {
    float:right;
    width: 610px;

}

#sadrzaj #meni {
    float: left;
    width: 200px;
    color:#660;
}

#box01 .centar {
    width:825px;
    margin-top:20px;
    padding-top:inherit;
    border-top:1px solid #000;
    margin-bottom:20px;
    padding-bottom:inherit;
    border-bottom:1px solid #000;
    margin-left:325px;
    padding-left:inherit;
    border-left:1px solid #000;
    margin-right:20px;
    padding-right:inherit;
    border-right:1px solid #000;
    font-size:20px;
    font-style:oblique;
    color:#660;
    height: 1000px;

}
#levo .levo01 {
    width: 800px;

}

.levo01  .2kolone {
    float: left;
    width: 600px;
    margin: 0 20px 0 0;
}

.2kolone .box01 {
    clear: both;
    width: 100%;
    height: 70px;
    padding: 15px 0 0 0;
    border-bottom: 1px solid #CCCCCC;
}
.box01 .box01ime{
    font-weight: bold;
    font-size: 14px;
}

.box01 img{
    float: left;
    margin: 3px 15px 0 0;
}

#levo .levo02{
    clear: both;
    width: 640px;
}

.levo02  .box02 {
    float: left;
    width: 298px;
    border: 1px solid #CCCCCC;
    margin: 0 20px 0 0px;
}

.box02 .box02sadrzaj{
    float: left;
    padding: 15px;
    width: 267px;
}

.box02sadrzaj .box02ime {
    font-weight: bold;
}

.box02sadrzaj ul{
    clear: both;
    list-style: none;
    margin: 0;
    padding: 0;
}

.box02sadrzaj ul li{
    padding: 0 0 5px 15px;
    margin: 0;
    background: url(images/templatemo_listicon.gif) top left no-repeat;
}

.box02 img {
    float: left;
    margin: 3px 15px 0 0;
}

#levo .levo03 {
    clear: both;
    width: 618px;
    background: #ffffff;
    border: 1px solid #CCCCCC;
}

.levo03 .box03{
    float: left;
    width: 140px;
    margin: 0 10px;
}

#meni .meni01 {
    width: 125px;
    height:300px;
    margin-bottom: 20px;
    padding-bottom:inherit;
    border-bottom: 1px solid #000;
    margin-right:20px;
    padding-right:inherit;
    border-right: 1px solid #000;
    margin-top:20px;
    padding-top:inherit;
    border-top:1px solid #000;
}

.meni01 .blog_box {
    padding-bottom: 5px;
    margin-bottom: 5px;
    border-bottom: 1px solid #dddddd;
}

.meni01 .blog_box h5 a{
    color: #195fff;
}

.meni01 .blog_box span{
    color: #ff366f;
}

.meni01 .meni_lista {
    float: left;
    width: 125px;
    padding-right: 10px;
    padding-top:20px;
    font-size:12px;
    font-style:italic;

}

#footer {
    padding: 195px;
    clear: both;
    width: 960px;
    margin-top:20px;
    padding-top:inherit;
    border-top:1px solid #000;
    text-align: center;
    font-size: 10px;
    color: #000;
}

#footer p{
    margin-bottom: 10px;
    padding: 0;
    text-align: justify;
}

#footer a{
    font-weight: normal;
}

nadam se da ti je jasno,posto sam ja tu menjala 356 hiljada zamisli,pa vise ni ja ne znam sta je sta :D

[ mish_ns @ 03.02.2011. 17:08 ] @

Probaj umesto
<div class="box01">   </div>

staviti:
<div id="imgText">   </div>

Meni tad radi.

I bilo bi dobro da ti slike budu 240x320 zbog <img height="240" width="320" ......

[ tina 92 @ 03.02.2011. 17:13 ] @

ne radi i dalje...da li treba da dodam nesto u css-u?

[ mish_ns @ 03.02.2011. 17:25 ] @

Numerisi slike kao
slika0
slika1
slika2
.
.
.

i stavi
<img height="240" width="320" src="images/slika0.jpg" alt="slika 1" id="slideshow" />

Sad ne bi smelo da ne radi, ako nista nisi menjala.

[ tina 92 @ 03.02.2011. 17:36 ] @

nisam menjala...ali ne radi i dalje.ja pokusavam na localhostu...

p.s.kad pritisnem dugme next cak ne pokusa ni refres stranice....

[ mish_ns @ 03.02.2011. 17:43 ] @

E evo koda prepravljenog...

[ tina 92 @ 03.02.2011. 17:52 ] @

hvala puno.sad cu da vidim pa javim

[ tina 92 @ 03.02.2011. 18:03 ] @

radi! hvala ti puno! :)

[ mish_ns @ 03.02.2011. 18:06 ] @

Nema na cemu...POZ :)

[ deks007 @ 03.02.2011. 21:10 ] @

Prati sam ovu temu onako iz radoznalosti i hocu da pozdravim ucesnike jer su dali primer kako se pruza pomoc . Znaci Tina nije trazila da joj neko napravi sve pod izgovorom frka je treba za juce , vec je trazila pomoc i sama pisala kodove a greske joj je ispravljao Mish_NS . Ovo pisem zato sto cesto nailazim na teme tipa jel moze neko da mi uradi ja nemam vremena a i frka mi je bez da se malo potrudi pa ako zapne neko ce uvek pomoci . Pozdrav !

[ tina 92 @ 03.02.2011. 22:25 ] @

deks007,prvo hvala na pozdravu...

drugo,znam da ima ljudi koji bi zeleli da urade nesto,ali da im zapravo to neko drugi uradi...ja sam maturski uzela iz teme koja me jako zanima a koju nisam poznavala uopste,sve sto sam naucila,naucila sam sama,pa ni ovoga puta nisam zelela da mi radi neko drugi,vec da mi pokaze a ja da naucim....mishu puno hvala,iako mi je on napisao javascript fajl,ipak sam ukapirala na koji nacin radi i na koji nacin se implementira.......

[ mish_ns @ 03.02.2011. 22:51 ] @

Evo i ja se zahvaljujem

Moram priznati da me je:

Citat:

da li znate neki dobar tutorijal,imate li neki dobar savet,ili ako vas ne mrzi,mozete li mi na primeru pokazati kako bih istu mogla da napravim?

nateralo da pomognem. ( Vrlo kulturno

)

Dok na npr.

Citat:

Ako neko ima u elektronskoj formi seminarski rad za UAE hajd neka mi se javi da mi posalje!! Hvala...nagradicu!!!

nikad u zivotu ne bi odg. A vidim da ni ostali clanovi nisu odgovorili... :P

Cilj foruma je da resi nedoumice, a ne da se nekom salju gotova resenja...

e sad da se vratim na temu...posto si rekla da si totalni pocetnik za javascript imas jedan brzinski kurs na:
http://www.w3schools.com/js/default.asp

POZDRAV!

[ deks007 @ 04.02.2011. 00:27 ] @

Svaka vam cast oboma i uspeh tebi u odbrani maturskog i upisu na faks a Mich_NS srece u radu . Za ovakve stvari i sluzi nas Elit-forum . Pozdrav !