Kirjautuminen

Haku

Tehtävät

Keskustelu: Nettisivujen teko: Little Gallery? Javascript?

z00ze [19.05.2010 08:50:02]

#

Huomenta,
Nyt tarttis keksiä jokin keino millä toteuttais semmosen jutun että olisi yksi iso kuva (400px leveä) ja sen alapuolella olisi 5 kuvaa jotka olisivat yhteensä tuon kuvan levyisiä (80px leveitä siis) ja pieniä kuvia klikkailemalla saisi isommaksi pääkuvaksi, ja klikkaamalla johonkin X kohtaan (suurennuslasiin pääkuvan yllä) isoin kuva aukeaisi uudelle sivulle full resolla, milläs tämä kannattaisi toteuttaa? php? javal? googlettelin kaikkea kivaa mutta löytyi pelkästään koko gallerioita joista ei pysty millään rakentamaan tommoista "pikku" kalleriaa... Systeemi tulee toimimaan tuotteen esittelynä jossa on siis 5 tai 6 kuvaa.
Ideoita otetaan myös vastaan... Ja mieluiten valmiita malleja / tutoriaaleja josta vois tommosen systeemin tehdä...

Ja sitten vielä olis semmonen että mikä hitto IE:tä vaivaa, oon css:llä (div) tehny parit linkit ja opera, firefox, chrome, safari näyttää ne pixelilleen oikeassa kohdassa mutta IE näyttää sitten ne joku 20px liian ylhäällä... Doctype väärä?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi-fi" lang="fi-fi" dir="ltr" >

-Marko
ps. haulla ja googlella ettisin muttei löytynyt mitään :)

jlaire [19.05.2010 13:05:27]

#

JavaScript on paras (ainoa järkevä) valinta tähän.

Hakusanoilla "javascript image gallery" löytyy paljon valmiita toteutuksia, esim. GalleryView (esimerkki, lataa) vaikuttaa hyvältä. Omille sivuilla soveltamisen ei pitäisi olla kovin vaikeaa, vaikkei olisi ennen käyttänyt jQueryä.

neau33 [19.05.2010 13:40:48]

#

Moikka z00ze!

tässä simppeli esimerkki...

<html><head>
<script language="javascript">
function set_img(img_src)
{
   document.getElementById('large_img').src = img_src;
}

function open_large_img()
{
   var imgURL = document.getElementById('large_img').src;
   window.open(imgURL,'_blank')
}

</script></head><body>
<div align="center">
   <img border="0" src="images/magnifier.png" width="32" height="32" onclick="open_large_img()">
   <table border="0" width="400" id="table1" cellspacing="1">
      <tr>
         <td colspan="5" height="400">
         <p align="center">
         <img border="0" id="large_img" src="images/image1.jpg" width="400" height="400"></td>
      </tr>
      <tr>
         <td height="76">
         <p align="center">
         <img border="0" src="images/image1.jpg" width="76" height="76" onclick="set_img(this.src)"></td>
         <td height="76">
         <p align="center">
         <img border="0" src="images/image2.jpg" width="76" height="76"  onclick="set_img(this.src)"></td>
         <td height="76">
         <p align="center">
         <img border="0" src="images/image3.jpg" width="76" height="76"  onclick="set_img(this.src)"></td>
         <td height="76">
         <p align="center">
         <img border="0" src="images/image4.jpg" width="76" height="76"  onclick="set_img(this.src)"></td>
         <td height="76">
         <p align="center">
         <img border="0" src="images/image5.jpg" width="76" height="76"  onclick="set_img(this.src)"></td>
      </tr>
   </table>
</div></body></html>

z00ze [19.05.2010 19:46:07]

#

Paha juttu kun aika on rajallista niin ei kerkee opiskelee php/javaa :(
Ainoa mikä tossa jutussa on että toi varmaan lataa noi kaikki kuvat kerralla, ja isoina, ajatus ois ollu että ohjelma olis tehny pikku kuvat yms mutta menee vähän liian hifistelyks, saa riittää joku 1024x768 resoset kuvat... menis puol päivää kaikil jos latais 5x 6000x4000 reson kuvia :D

Kiitoksia, tämä riittää vallan mainiosti! Ja kiitoksia erittäin nopeasta vastauksesta :)

z00ze [26.05.2010 08:40:19]

#

uppia sen vertta että oisko jollaki ideaa tohon että mikä doctype tai vastaava toimis satavarmasti yleisimmällä selaimilla... menee hermot aina ku tekee hienot sivut firefoxil/operal/chromel ja sit ie:llä koko *tun homma kusee ihan 100-0 :D

Metabolix [26.05.2010 16:21:51]

#

Renderöinti ei ole DOCTYPEstä kiinni kuin sen verran, että jos tiedostossa on kiva DOCTYPE, selaimet käyttävät standarditilaa, muussa tapauksessa historiallista yhteensopivuustilaa. Minusta paras ratkaisu on laittaa sivulle nykyaikainen DOCTYPE, jolloin kunnolliset selaimet yrittävät näyttää sen sääntöjen mukaan. IE:n kohdalla (ennen versiota 8) "standarditila" on suunnilleen yhtä pahasti pielessä kuin epästandardikin, joten ei auta kuin lisätä ehdollisilla kommenteilla sitä varten oma tyylitiedosto (ja tarvittaessa muutakin).

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Tietoa sivustosta