PC Ekspert Forum - HTML5 image slideshow

PC Ekspert Forum (https://forum.pcekspert.com/index.php)

- Web dizajn, programiranje i ostalo (https://forum.pcekspert.com/forumdisplay.php?f=39)

- - HTML5 image slideshow (https://forum.pcekspert.com/showthread.php?t=243180)

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.

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 :D

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;

}

Srećom pa si mogu vizualizirati kako to izgleda.:D
Daj stavi i HTML.

Citiraj:

Autor sinisa1989 (Post 2319500)

Srećom pa si mogu vizualizirati kako to izgleda.:D
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:









Image Gallery

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. :D
Ovo sam nabrzinu napravio, pa sam možda/vjerojatno shebao pozicioniranje slide-a. Valjda ti to nije problem vratiti.

Ovo radi, ali okvir nije bas u centru :D poigrat cu se s time.

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

kako nije u centru?
po horizontali je :D

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

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.

Citiraj:

Autor sinisa1989 (Post 2320507)

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 :D