"Kuvakollaasin" tekeminen nettisivuille

[jhh]

Voisiko joku kertoa, että miten ihmeessä saa tehtyä sellaisen kuvakokoelman kotisivuille, että kuvat vaihtuvat automattisesti tietyin väliajoin ja jos jotain tiettyä kuvaa haluaa "klikkaamalla" ko kuvan saa suuremmaksi...
Ei oma järki riitä...

[Crimson]

http://www.apple.com/fi/mobileme/features/gallery.html

[jhh]

Kiitos, mutta haluaisin tehdä sen suoraan tuohon koodiini...
Lisää ideoita?

[kallekilponen]

Eikös iWebissä ole vähän sen tyyppinen toiminto?

Millä ohjelmalla teet sivuja?

[jhh]

Kirjoittelen itse koodia (tosin Dreamweaverin editoriin, koska se helpottaa ehdottamalla komentoja).
Eli en käytä ohjelmaa siten, että se tekisi itse koodia...

[Fixx]

eikös tuo kuvan vaihto tehdä yleensä javaskriptillä. Jos kirjoitat googleen vaikka "changing image slide show html" niin saat koodiesimerkkejä.
Ajattelitko ison kuvan yksinkertaisena linkkinä vai lighttable-tyyppisenä (viheliäisenä) pomppuikkunana?

[jhh]

http://www.studiosatukukka.fi/

Esim tuossa sivun alareunassa on sellainen "laatikko" ja toiminta, millaisen haluaisin... Apuja?

Fixx: kyllä haluisin jotain efektiä kuvien vaihtumiseen, jos pelkistä kuvien vaihdosta puhutaan...

[rockenroller]

Jquery ja muutama example..
[*?]

Otan aina muutaman examplen jqueryn kera niin kyllä alkavat kuvat vilkkua. Välillä myös arkisin.

[jhh]

Alla näkyy koodi, mitä testasin...
Tuotteet liikkvat hienosti (oikealta vasemalle), mutta vielä olisi pari asiaa mitkä ihmetyttää ja ne pitäisi saada kuntoon:

1. Miksi ihmeessä jokaiseen kuvaan tulee kehykset ja ne siirtyy yhdessä vähän alaspäin, kun hiirellä menee jonkin niistä päälle? Ja kun hiirellä menee pois niiden päältä niin taas ne siirtyvät takaisin?
2. Kun tietyn liikuvan tuotteen päälle menen hiirellä, niin kaikki pysähtyy (ihan ok). Ja haluan määritellä että se menee www-sivulle (sekin ok).
Mutta mitäsä sitten kun haluan tietystä tuoteesta mennäkin vaan suurempaan kuvaan, miten se tehdään (esim aukeaisi lightbox-tyylisesti tai muuten vaan jotenkin fiksusti uuteen kuvaan)?

Koodi: Valitse kaikki

//Specify the slider's images
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<a href="http://www.google.com"><img src="juusto.gif" border=1></a>'
leftrightslide[1]='<a href="http://"><img src="kahvi.gif" border=1></a>'
leftrightslide[2]='<a href="http://"><img src="leipa.gif" border=1></a>'
leftrightslide[3]='<a href="http://"><img src="kala.gif" border=1></a>'

//Specify gap between each image (use HTML):
var imagegap="<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>"

//Specify pixels gap between each slideshow rotation (use integer):
var slideshowgap=5


////NO NEED TO EDIT BELOW THIS LINE////////////

var copyspeed=slidespeed
leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')
var actualwidth=''
var cross_slide, ns_slide

function fillup(){
if (iedom){
cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
cross_slide2.style.left=actualwidth+slideshowgap+"px"
}
else if (document.layers){
ns_slide=document.ns_slidemenu.document.ns_slidemenu2
ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
ns_slide.document.write(leftrightslide)
ns_slide.document.close()
actualwidth=ns_slide.document.width
ns_slide2.left=actualwidth+slideshowgap
ns_slide2.document.write(leftrightslide)
ns_slide2.document.close()
}
lefttime=setInterval("slideleft()",30)
}
window.onload=fillup

function slideleft(){
if (iedom){
if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"
else
cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+"px"

if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px"
else
cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+slideshowgap+"px"

}
else if (document.layers){
if (ns_slide.left>(actualwidth*(-1)+8))
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.left+actualwidth+slideshowgap

if (ns_slide2.left>(actualwidth*(-1)+8))
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.left+actualwidth+slideshowgap
}
}


if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')
write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>')
write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>')
write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</script>
</div>
</div>

[rockenroller]

.Net julkaisunumero 207. kannessa on otsikko 'Create an image map in jQuery'.

http://www.netmag.co.uk/zine/latest-issue/issue-207

Tämän saattaa löytää ainakin Helsingissä Kirjasto 10 (kympissä) lehtihyllystä.

[spiidi78]

1. Miksi ihmeessä jokaiseen kuvaan tulee kehykset

Mitä tuosta sotkusta nyt selvää sai, niin <img> tageille on asetettu border=1 -attribuutti, joka tekee kehykset kuviin. Kokeile border=0

[rockenroller]

Firefoxissa tein linkin takana oleville kuville värin: transparent. Tämä vaikutti kehyksen väriin.

[jhh]

Nojjoo, pääsen taas asian pariin pitkästä aikaa...
Eli nyt on kehysmäärittelyt css-puolella ok, mutta edelleen ongelmana että:

Koodi: Valitse kaikki

var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<a href="http://www.google.com"><img src="juusto.gif" border=1></a>'
leftrightslide[1]='<a href="http://"><img src="kahvi.gif" border=1></a>'
leftrightslide[2]='<a href="http://><img src="leipä.gif" border=1></a>'
leftrightslide[3]='<a href="http://"><img src="kala.gif" border=1></a>'

1. Kun laitan yllä olevien kuvien (mallina ylin) kohtaan www-osoitteen niin pelaa ok,
mutta haluisin sen aukeamaan omaan välilehteen/ikkunaan, en alkup. sivun päälle. Miten sen teen?
2. Ja jokaista kuvaa kun en halua linkittää www-sivuun, vaan esim. samaan isompaan kuvaan tai pdf:ään, niin miten sen teen?

[jjari]

http://www.w3schools.com/

[jhh]

Ja mistä täältä... Yritin jo tuossa ennemminkin katsella, mutta kun ei osu silmään (tai sitten mun järki vaan ei luista)...

[RikuS]

Tässä muutama ohje...

Ensinnäkin kiedo koko kuvarulettisi divin sisään:

Koodi: Valitse kaikki

<div id="kuvaruletti">
sisältö
</di>

Tee css-määritys jolla poistetaan kaikista kuvaruletin kuvista reunukset, jotta voit jättää jokaisen kuvan kohdalta borderin kokonaan pois:

Koodi: Valitse kaikki

#kuvaruletti img { border: 0; }

Jos haluat avata linkin uuteen ikkunaan, pitäisi käyttää javascriptiä. koska html/xhtml on tarkoitettu sisällölle ja css ulkoasulle. Jos kuitenkin haluat tehdä tämän ns. vanhalla ja joskus vielä poistuvalla tyylillä:

Koodi: Valitse kaikki

<a href="http://www.hopeinenomena.net" target="_blank"><img src="omena.png" alt="Hopeinen Omena" /></a>

Kun haluat linkittää vaikka pdf-tiedostoon:

Koodi: Valitse kaikki

<a href="hopeinenomena.pdf"><img src="omena.png" alt="Hopeinen Omena" /></a>

Ja netti on tosiaan täynnä ohjeita miten nämä menee.

[jhh]

Kiitos oikein paljon hyvistä neuvoista (niitä ei koskaan saa liikaa)...
Vielä haluaisin ohjetta/malli siitä javascriptistä, jota voisi käyttää linkittämisessä uuteen ikkunaan (siis tarkoitan jotain pientä efektiä tms. lightbox-tyylistä juttua)?

[RikuS]

Kiitos oikein paljon hyvistä neuvoista (niitä ei koskaan saa liikaa)...
Vielä haluaisin ohjetta/malli siitä javascriptistä, jota voisi käyttää linkittämisessä uuteen ikkunaan (siis tarkoitan jotain pientä efektiä tms. lightbox-tyylistä juttua)?

Tämäkin löytyi googlella:
http://articles.sitepoint.com/article/s ... nt-world/3

Lightboxin manuaalista löytyy taas ohjeet sen käyttöön.

[jhh]

Mitäs eroa tuolla sitepointin jutulla oli tähän lähettämääsi koodinpätkään (pakko tyhmänä kysyä)?

Koodi: Valitse kaikki

<a href="http://www.hopeinenomena.net" target="_blank"><img src="omena.png" alt="Hopeinen Omena" /></a>

Ja siihen mun edellisen kysymykseen. Miten voisin saada lightboksia yhdistettyä vaan noihin kohtiin, missä ei ole linkkausta www-sivuille? Onko mahdollista?
Ihan omanaan olen saanut lightboksin toimimaan, mut nyt tuohon slaidisöyhun minä en saa sitä taittumaan Siihen tarvitsen teidän viisaampian neuvoja/koodeja...

[RikuS]

Mitäs eroa tuolla sitepointin jutulla oli tähän lähettämääsi koodinpätkään (pakko tyhmänä kysyä)?

Nettisivut pitäisi koodata niin että lopputulos on validia, testata voit vaikka täällä http://validator.w3.org/
Sitepointin jutussa oli se ero että niin tehtynä se on tehty validisti, jos ylipäätään pitää linkki uudelle sivulle tehdä. Miksi linkkisi ei voi olla samalle sivulle, ainahan sieltä takaisin pääsee?

Lightboxin ja kuvarulettisi kesken on joku ristiriita joka aiheuttaa toimimattomuuden, mikäli koodisi on muuten oikein.