|
19.01.2013., 19:21 | #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., 19:25 | #2 |
Premium
Datum registracije: Mar 2009
Lokacija: Pula
Postovi: 599
|
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 |
|
|
Oglas
|
|
20.01.2013., 12:46 | #4 |
Premium
Datum registracije: May 2004
Lokacija: Duga Resa
Postovi: 823
|
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; } Zadnje izmijenjeno od: Ivan_1. 20.01.2013. u 12:55. |
21.01.2013., 10:57 | #6 |
Premium
Datum registracije: May 2004
Lokacija: Duga Resa
Postovi: 823
|
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> |
21.01.2013., 13:19 | #7 |
Bazinga
Datum registracije: Nov 2007
Lokacija: Križevci
Postovi: 3,877
|
HTML: 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> 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; } 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.
__________________
The best place to hide a dead body is page 2 of Google search results. |
21.01.2013., 22:30 | #8 |
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., 00:44 | #9 |
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 |
22.01.2013., 12:46 | #10 |
Bazinga
Datum registracije: Nov 2007
Lokacija: Križevci
Postovi: 3,877
|
Stavi ovako: Code:
#wrapper{margin: 150px auto 0 auto;} 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. |
|
|
Oglas
|
|
22.01.2013., 22:55 | #11 | |
Premium
Datum registracije: May 2004
Lokacija: Duga Resa
Postovi: 823
|
Citiraj:
|
|
|
|
Oglas
|
|
|
|