HTML5 image slideshow

Ivan_1 · 19.01.2013., 20:21

Amater sam sto se tice web dizajna, radim si neki slideshow koji sam sklepao od koda koji sam pronalazio po netu.
Koristen je HTML5, javascript i CSS jer druge tehnologije ne rade na serveru.

Sve to radi uredno, ali problem koji moram rijesiti je sljedeci.
Okvir u kojem se prikazuje slika je fiksne velicine odreden u CSS-u.
Što me dovodi do toga da slike koje ce se prikazivati u njemu moraju biti resized na tu fiksnu velicinu, sto svakako nije moguce jer ima malih i velikh slika razlicitog omjera velicina (aspect ratio).
A kad u HTML-u odredim velicinu za pojednu sliku preko width i height propertya da budu prilagodene tom okviru onda budu rastegnute ili sužene što sliku cini neuglednom.

Kako napraviti da se okvir za prikaz prilagođava velicini slike automatski?

Hvala.

wnbeeeE · 19.01.2013., 20:25

moras namjestit width i height property okvira na auto, ali to je sve upitno bez konkretnog css koda.
Nije to bas tako jednostavno, jer se css zna često pobijati

sinisa1989 · 20.01.2013., 12:09

Daj stavi kôd tu.

Ivan_1 · 20.01.2013., 13:46

Evo to je taj CSS

EDIT: velicinu okvira odredujem promjenom tih propertya u "sliedshow" i slideshow ul" jer okvir je dvostruki (ako sam ja dobro shvatio kod), iako razmisljam da to izbacim i ostavim samo jedan...

Code:

*{
    margin:0;
    padding:0;
}

body{
    color:#eee;
    background:url('img/bg.jpg') repeat-x #0c0d10;
    font:13px "Lucida Sans Unicode",Arial,Helvetica,sans-serif;
}

#slideshow{
    background-color:#F5F5F5;
    border:1px solid #FFFFFF;
    height: 540px; /*original "height: 340px" */
    margin:150px auto 0;
    position:relative;
    width: 840px; /* original "width: 640px;" */
    
    -moz-box-shadow:0 0 22px #111;
    -webkit-box-shadow:0 0 22px #111;
    box-shadow:0 0 22px #111;
}

#slideshow ul{
    height: 520px; /*original "height: 320px" */
    left:10px;
    list-style:none outside none;
    overflow:hidden;
    position:absolute;
    top:10px;
    width: 820px; /*original "width: 620px" */
}

#slideshow li{
    position:absolute;
    display:none;
    z-index:10;
}

#slideshow li:first-child{
    display:block;
    z-index:1000;
}

#slideshow .slideActive{
    z-index:1000;
}

#slideshow canvas{
    display:none;
    position:absolute;
    z-index:100;
}

#slideshow .arrow{
    height:86px;
    width:60px;
    position:absolute;
    background:url('img/arrows.png') no-repeat;
    top:50%;
    margin-top:-43px;
    cursor:pointer;
    z-index:5000;
}

#slideshow .previous{ background-position:left top;left:0;}
#slideshow .previous:hover{ background-position:left bottom;}

#slideshow .next{ background-position:right top;right:0;}
#slideshow .next:hover{ background-position:right bottom;}


/* The following styles are only used for the styling of the demo page */

p.tzine{
    text-align:center;
    font-size:12px;
    margin:50px;
}

p.credit{
    text-align:center;
    color:#888;
    font-size:10px;
}

p.credit a,
p.credit a:visited{
    color:#ccc;
    border-bottom-color:#aaa;
}

p.credit a:hover{
    border-bottom-color:transparent;
}

a, a:visited {
    text-decoration:none;
    outline:none;
    border-bottom:1px dotted #97cae6;
    color:#97cae6;
}

a:hover{
    border-bottom:1px dashed transparent;
}

.clear{
    clear:both;
}

sinisa1989 · 20.01.2013., 23:36

Srećom pa si mogu vizualizirati kako to izgleda.

Daj stavi i HTML.

Ivan_1 · 21.01.2013., 11:57

Citiraj:

Autor sinisa1989

Srećom pa si mogu vizualizirati kako to izgleda.

Daj stavi i HTML.

Ok, nema u tom htmlu bas neke filozofije, cilje je samo da prikaze te slike u tom okviru. Ostavio sam samo jedan link na sliku u klasi "slides" da vidis kako izgleda jer su ostali samo c/p s drugim rednim brojem slike.

Code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Image Gallery</title>

<link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>
    
<div id="slideshow">

    <ul class="slides">
        <li><img src="img/galerija2/0001.gif" width="840" height="540" alt="" /></li>
        
    </ul>

    <span class="arrow previous"></span>
    <span class="arrow next"></span>
</div>

    
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>

sinisa1989 · 21.01.2013., 14:19

HTML:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Image Gallery</title>

<link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>
    
<div id="wrapper">    <!-- ovo sam dodao da bi centrirao slide (u css-u imaš dvije linije koje se vežu na to. ništa važno, samo centriranje slide-a.)-->
    <div id="slideshow">

        <ul class="slides">
            <li><img src="1.jpg" alt="" /></li>
        </ul>

        <span class="arrow previous"></span>
        <span class="arrow next"></span>
    </div>
</div>
    
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>

CSS:

Code:

*{
    margin:0;
    padding:0;
}

body{
    color:#eee;
    background:url('img/bg.jpg') repeat-x #0c0d10;
    font:13px "Lucida Sans Unicode",Arial,Helvetica,sans-serif;
}

/* -- new*/
#wrapper
{
    width: 960px;
    margin: 0 auto;
}
/* --end-of-new*/
#slideshow{
    background-color:#F5F5F5;
    border:1px solid #FFFFFF;
    /*height: 540px;*/ /*original "height: 340px" */
    /*margin:150px auto 0;*/
    position:relative;
    /*width: 840px;*/ /* original "width: 640px;" */
    display: inline-block;
  
    -moz-box-shadow:0 0 22px #111;
    -webkit-box-shadow:0 0 22px #111;
    box-shadow:0 0 22px #111;
}

#slideshow__ ul{ /* dodan__ zbog selektora*/
    height: 520px; /*original "height: 320px" */
    left:10px;
    list-style:none outside none;
    overflow:hidden;
    position:absolute;
    top:10px;
    width: 820px; /*original "width: 620px" */
}

#slideshow li{
    /*position:absolute;*/ /* --new */
    display:none;
    z-index:10;
}

#slideshow li:first-child{
    display:block;
    z-index:1000;
}

#slideshow .slideActive{
    z-index:1000;
}

#slideshow canvas{
    display:none;
    position:absolute;
    z-index:100;
}

#slideshow .arrow{
    height:86px;
    width:60px;
    position:absolute;
    background:url('img/arrows.png') no-repeat;
    top:50%;
    margin-top:-43px;
    cursor:pointer;
    z-index:5000;
}

#slideshow .previous{ background-position:left top;left:0;}
#slideshow .previous:hover{ background-position:left bottom;}

#slideshow .next{ background-position:right top;right:0;}
#slideshow .next:hover{ background-position:right bottom;}


/* The following styles are only used for the styling of the demo page */

p.tzine{
    text-align:center;
    font-size:12px;
    margin:50px;
}

p.credit{
    text-align:center;
    color:#888;
    font-size:10px;
}

p.credit a,
p.credit a:visited{
    color:#ccc;
    border-bottom-color:#aaa;
}

p.credit a:hover{
    border-bottom-color:transparent;
}

a, a:visited {
    text-decoration:none;
    outline:none;
    border-bottom:1px dotted #97cae6;
    color:#97cae6;
}

a:hover{
    border-bottom:1px dashed transparent;
}

.clear{
    clear:both;
}

Ovako nešto.
U css-u sam ti promijenio jedan selektor, jer mi se nije dalo komentirati liniju po liniju.

Ovo sam nabrzinu napravio, pa sam možda/vjerojatno shebao pozicioniranje slide-a. Valjda ti to nije problem vratiti.

Ivan_1 · 21.01.2013., 23:30

Ovo radi, ali okvir nije bas u centru

poigrat cu se s time.

Jel mogu ove vrijednosti height i width kod wrappera mijenjati i na neke druge nacine?

Locutus of Borg · 22.01.2013., 01:44

kako nije u centru?
po horizontali je

po vertikali, probaj sa
margin: auto; na #wrapper

sinisa1989 · 22.01.2013., 13:46

Stavi ovako:

Code:

#wrapper{margin: 150px auto 0 auto;}

Tako ćeš vratiti marginu, tj. poziciju onako kako je bila.
BTW. moja preporuka ti je da koristiš reset css-a.
Više o tome.

Ivan_1 · 22.01.2013., 23:55

Citiraj:

Autor sinisa1989

Stavi ovako:

Code:

#wrapper{margin: 150px auto 0 auto;}

Tako ćeš vratiti marginu, tj. poziciju onako kako je bila.
BTW. moja preporuka ti je da koristiš reset css-a.
Više o tome.

OK, hvala, budem eksperimentirao, ovo s tim wrapperom je vec significant improvement

20.01.2013., 12:09	#3
sinisa1989 Bazinga Moj komp Datum registracije: Nov 2007 Lokacija: Križevci Postovi: 3,933	Daj stavi kôd tu. __________________ The best place to hide a dead body is page 2 of Google search results.

20.01.2013., 23:36	#5
sinisa1989 Bazinga Moj komp Datum registracije: Nov 2007 Lokacija: Križevci Postovi: 3,933	Srećom pa si mogu vizualizirati kako to izgleda. Daj stavi i HTML. __________________ The best place to hide a dead body is page 2 of Google search results.

22.01.2013., 13:46	#10
sinisa1989 Bazinga Moj komp Datum registracije: Nov 2007 Lokacija: Križevci Postovi: 3,933	Stavi ovako: Code: #wrapper{margin: 150px auto 0 auto;} Tako ćeš vratiti marginu, tj. poziciju onako kako je bila. BTW. moja preporuka ti je da koristiš reset css-a. Više o tome. __________________ The best place to hide a dead body is page 2 of Google search results.

19.01.2013., 20:21	#1
Ivan_1 Premium Datum registracije: May 2004 Lokacija: Duga Resa Postovi: 823	HTML5 image slideshow Amater sam sto se tice web dizajna, radim si neki slideshow koji sam sklepao od koda koji sam pronalazio po netu. Koristen je HTML5, javascript i CSS jer druge tehnologije ne rade na serveru. Sve to radi uredno, ali problem koji moram rijesiti je sljedeci. Okvir u kojem se prikazuje slika je fiksne velicine odreden u CSS-u. Što me dovodi do toga da slike koje ce se prikazivati u njemu moraju biti resized na tu fiksnu velicinu, sto svakako nije moguce jer ima malih i velikh slika razlicitog omjera velicina (aspect ratio). A kad u HTML-u odredim velicinu za pojednu sliku preko width i height propertya da budu prilagodene tom okviru onda budu rastegnute ili sužene što sliku cini neuglednom. Kako napraviti da se okvir za prikaz prilagođava velicini slike automatski? Hvala.

19.01.2013., 20:25	#2
wnbeeeE Premium Datum registracije: Mar 2009 Lokacija: Pula Postovi: 600	moras namjestit width i height property okvira na auto, ali to je sve upitno bez konkretnog css koda. Nije to bas tako jednostavno, jer se css zna često pobijati

21.01.2013., 23:30	#8
Ivan_1 Premium Datum registracije: May 2004 Lokacija: Duga Resa Postovi: 823	Ovo radi, ali okvir nije bas u centru poigrat cu se s time. Jel mogu ove vrijednosti height i width kod wrappera mijenjati i na neke druge nacine?

22.01.2013., 01:44	#9
Locutus of Borg Premium Datum registracije: Aug 2007 Lokacija: Nedaleko Osijeka Postovi: 64	kako nije u centru? po horizontali je po vertikali, probaj sa margin: auto; na #wrapper

Oglasni prostor
PC Ekspert Forum Oglas