|
Hinnavaatlus
:: Foorum
:: Uudised
:: Ärifoorumid
:: HV F1 ennustusvõistlus
:: Pangalink
:: Telekavad
:: HV toote otsing
|
|
| autor |
|
QWhite
Kreisi kasutaja
liitunud: 24.02.2004
|
02.03.2009 13:04:44
CSS galerii hoveriga |
|
|
Kas ja kuidas on võimalik teha CSS-ga (st JavaScriptita) galeriid, kus thumbist hiirega üle minnes ilmub sama thumbi suurem variant, mis kaob ära, kui hiirega minna välja väiksema thumbi alast (et kui suurem thumb katab näiteks ka teisi väikseid thumbe, siis ma ei pea hiirega väga kaugele purjetama). Ja väikse thumbi ala oleks ka klikitav.
Tänud!
|
|
| Kommentaarid: 65 loe/lisa |
Kasutajad arvavad: |
   |
:: |
1 :: |
0 :: |
60 |
|
| tagasi üles |
|
 |
argesson
HV kasutaja
liitunud: 11.03.2003
|
|
03.03.2009 13:05:47
|
|
|
Leidsin sellise näite: http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/
Kui koodi pisut mudida, siis võib saada umbes taolise, nagu sul vaja on.
CSS
<style type="text/css">
.thumbrow {
border-bottom: 1px solid gray;
margin: 4px;
vertical-align: top;
}
.gallerycontainer {
position: relative;
}
.thumbnail img {
border: 1px dashed gray;
margin: 0 5px 5px 0;
padding: 5px;
}
.thumbnail:hover {
background-color: transparent;
}
.thumbnail span {
position: absolute;
background-color: lightyellow;
padding: 5px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img {
border-width: 0;
padding: 2px;
}
.thumbnail:hover span {
visibility: visible;
z-index: 50;
}
.thumbnail span:hover {
visibility: hidden;
}
</style> |
HTML
<div class="gallerycontainer">
<div class="thumbrow">
<a class="thumbnail" href="#thumb"><img src="http://www.dynamicdrive.com/cssexamples/media/tree_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="http://www.dynamicdrive.com/cssexamples/media/tree.jpg" /><br />Simply beautiful.</span></a>
Simply beautiful.
</div>
<div class="thumbrow">
<a class="thumbnail" href="#thumb"><img src="http://www.dynamicdrive.com/cssexamples/media/ocean_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="http://www.dynamicdrive.com/cssexamples/media/ocean.jpg" /><br />So real, it's unreal. Or is it?</span></a>
So real, it's unreal. Or is it?
</div>
<div class="thumbrow">
<a class="thumbnail" href="#thumb"><img src="http://www.dynamicdrive.com/cssexamples/media/sushi2_thumb.jpg" width="100px" height="75px" border="0" /><span><img src="http://www.dynamicdrive.com/cssexamples/media/sushi2.jpg" /><br />Sushi for dinner anyone?</span></a>
Sushi for dinner anyone?
</div>
<div class="thumbrow">
<a class="thumbnail" href="#thumb"><img src="http://www.dynamicdrive.com/cssexamples/media/horses_thumb.jpg" width="100px" height="70px" border="0" /><span><img src="http://www.dynamicdrive.com/cssexamples/media/horses.jpg" /><br />Run wild with horses.</span></a>
Run wild with horses.
</div>
</div> |
|
|
| Kommentaarid: 2 loe/lisa |
Kasutajad arvavad: |
|
:: |
0 :: |
0 :: |
2 |
|
| tagasi üles |
|
|
andrusny
Kreisi kasutaja
liitunud: 20.03.2006
|
|
03.03.2009 13:52:04
|
|
|
No kui see suurem pilt katab alumise thumbi, kuidas sa talle mõtled selgeks teha, et ta selle pealt maas on juba css abil?? Kahtlane, vähemalt selle koodiga minu arust küll ei saa.
_________________
 |
|
| Kommentaarid: 7 loe/lisa |
Kasutajad arvavad: |
|
:: |
0 :: |
0 :: |
7 |
|
| tagasi üles |
|
|
argesson
HV kasutaja
liitunud: 11.03.2003
|
|
03.03.2009 14:04:10
|
|
|
| andrusny kirjutas: |
| No kui see suurem pilt katab alumise thumbi, kuidas sa talle mõtled selgeks teha, et ta selle pealt maas on juba css abil?? Kahtlane, vähemalt selle koodiga minu arust küll ei saa. |
See on tehtud nii, et suurem pilt tuleb väikese kõrvale: http://bin.ee/hv/hovercss/
|
|
| Kommentaarid: 2 loe/lisa |
Kasutajad arvavad: |
|
:: |
0 :: |
0 :: |
2 |
|
| tagasi üles |
|
|
andrusny
Kreisi kasutaja
liitunud: 20.03.2006
|
|
03.03.2009 18:28:24
|
|
|
| tsitaat: |
| et kui suurem thumb katab näiteks ka teisi väikseid thumbe, siis ma ei pea hiirega väga kaugele purjetama |
_________________
|
|
| Kommentaarid: 7 loe/lisa |
Kasutajad arvavad: |
|
:: |
0 :: |
0 :: |
7 |
|
| tagasi üles |
|
|
argesson
HV kasutaja
liitunud: 11.03.2003
|
|
03.03.2009 18:39:06
|
|
|
| andrusny kirjutas: |
| tsitaat: |
| et kui suurem thumb katab näiteks ka teisi väikseid thumbe, siis ma ei pea hiirega väga kaugele purjetama |
|
Mudi pisut CSS osa ja ongi olemas. 
Niikuinii on seda koodi tarvis enda vajaduste tarbeks kohendada.
|
|
| Kommentaarid: 2 loe/lisa |
Kasutajad arvavad: |
|
:: |
0 :: |
0 :: |
2 |
|
| tagasi üles |
|
|
Speedee
HV kasutaja
liitunud: 23.04.2003
|
|
04.03.2009 11:53:31
|
|
|
| CSSplay saidil on näiteid nagu muda, nt üks neist, mis vastab sinu kirjeldusele.
|
|
| Kommentaarid: 13 loe/lisa |
Kasutajad arvavad: |
|
:: |
0 :: |
0 :: |
13 |
|
| tagasi üles |
|
|
andrusny
Kreisi kasutaja
liitunud: 20.03.2006
|
|
04.03.2009 13:53:15
|
|
|
Kas ei saa mina soovist aru või teie. Minu arust soovib tasellist nagu siin, kui parempoolsete reklaamide pealeminna. Ainult soov on , et tõmbuks väikeseks tagasi juba siis, kui oled algse (väikese) pildi mõõtmetest väljas. (See pole CSS seal.)
_________________
|
|
| Kommentaarid: 7 loe/lisa |
Kasutajad arvavad: |
|
:: |
0 :: |
0 :: |
7 |
|
| tagasi üles |
|
|
QWhite
Kreisi kasutaja
liitunud: 24.02.2004
|
|
04.03.2009 16:12:42
|
|
|
| andrusny kirjutas: |
| Kas ei saa mina soovist aru või teie. Minu arust soovib tasellist nagu siin, kui parempoolsete reklaamide pealeminna. Ainult soov on , et tõmbuks väikeseks tagasi juba siis, kui oled algse (väikese) pildi mõõtmetest väljas. (See pole CSS seal.) |
Täpselt nii.
|
|
| Kommentaarid: 65 loe/lisa |
Kasutajad arvavad: |
|
:: |
1 :: |
0 :: |
60 |
|
| tagasi üles |
|
|
andrusny
Kreisi kasutaja
liitunud: 20.03.2006
|
|
08.03.2009 02:10:32
|
|
|
Proovisin siis teha seda, mis sa soovid. Pole kül CSS peal vaid JavaScript, kuid välimus peaks nüüd olema selline nagu mõtlesid.
Kahjuks ei tööta Operaga, IE ja FF toimivad.
Galerii DEMO
Fail ilma piltideta
_________________
viimati muutis andrusny 08.03.2009 22:24:20, muudetud 1 kord |
|
| Kommentaarid: 7 loe/lisa |
Kasutajad arvavad: |
|
:: |
0 :: |
0 :: |
7 |
|
| tagasi üles |
|
|
argesson
HV kasutaja
liitunud: 11.03.2003
|
|
08.03.2009 11:25:55
|
|
|
| andrusny kirjutas: |
Proovisin siis teha seda, mis sa soovid. Pole kül CSS peal vaid JavaScript, kuid välimus peaks nüüd olema selline nagu mõtlesid.
Kahjuks ei tööta Operaga, IE ja FF toimivad.
Galerii DEMO
Fail ilma piltideta |
Natuke mööda panid vist:
| QWhite kirjutas: |
| Kas ja kuidas on võimalik teha CSS-ga (st JavaScriptita) galeriid... |
Aga üldiselt peaks ülesande vist tõesti javascripti abil lahendama, kuna tundub, et css ei paku piisavalt vahendeid selle tegemiseks. Peamiseks valupunktiks on just thumbi mõõtmete järgi toimetamine, kui pilt suurelt ees on. Kuigi mingi häkiga võib see isegi lahendatav olla.
|
|
| Kommentaarid: 2 loe/lisa |
Kasutajad arvavad: |
|
:: |
0 :: |
0 :: |
2 |
|
| tagasi üles |
|
|
Linksys
HV vaatleja
liitunud: 02.03.2009
|
|
| Kommentaarid: 1 loe/lisa |
Kasutajad arvavad: |
|
:: |
0 :: |
0 :: |
1 |
|
| tagasi üles |
|
|
kristjan07
HV kasutaja
liitunud: 09.10.2004
|
|
12.03.2009 17:36:15
|
|
|
QWhite ma arvan et sulle sobib see: Hoverbox Image gallery
PS seal all on link Read the tutorial 
Oli see mida sa soovisid?
_________________
sa pole hea seni, kuni sa teisi paremaks ei tee
 |
|
| Kommentaarid: 12 loe/lisa |
Kasutajad arvavad: |
|
:: |
1 :: |
0 :: |
10 |
|
| tagasi üles |
|
|
QWhite
Kreisi kasutaja
liitunud: 24.02.2004
|
|
12.03.2009 18:05:02
|
|
|
kristjan07, tänan aga põhiküsimus on ikka lahendamata - et suur thumb kaoks ära siis, kui hiirega olen VÄIKSE thumbi alast väljunud.
Linksys, päris mööda 
Aga te ei pea sellega rohkem pead vaevama, lahendan ta JS-ga.
|
|
| Kommentaarid: 65 loe/lisa |
Kasutajad arvavad: |
|
:: |
1 :: |
0 :: |
60 |
|
| tagasi üles |
|
|
kristjan07
HV kasutaja
liitunud: 09.10.2004
|
|
12.03.2009 18:41:19
|
|
|
| QWhite kirjutas: |
kristjan07, tänan aga põhiküsimus on ikka lahendamata - et suur thumb kaoks ära siis, kui hiirega olen VÄIKSE thumbi alast väljunud.
|
aa seleta mulle mis suur vahe seal on sellel lahendusel mis ma pakkusin ja see mida sa tahad...seal on ju ok küll jah siis kui suurelt thumbilt lahkud siis tuleb teine 
EDIT: mõtlen seda et sinu lahenduse puhul ju oleks lihtsalt suurele thumbile lülitumine varem või on veel mingi erinevus?
_________________
sa pole hea seni, kuni sa teisi paremaks ei tee
|
|
| Kommentaarid: 12 loe/lisa |
Kasutajad arvavad: |
|
:: |
1 :: |
0 :: |
10 |
|
| tagasi üles |
|
|
mikk36
HV Guru
liitunud: 21.02.2004
|
|
12.03.2009 18:51:49
|
|
|
Väike alast lahkumisega on vast see teema, et tuleks ise javascriptis natukene programmeerida, css'ga pole võimalik seda teha, kuna suurem pilt katab väiksema ära ja css'ga ei saa siis enam mõõta et kas hiir on väiksema peal või mitte, kuna suurem pilt võtab nö fookuse endale.
Idee endal selline et niipea kui hiir väiksema pildi peale läheb mõõdad js'is välja pisipildi mõõtmed ja asukoha ning siis lihtsalt trackid hiire asukohta et kuni ta mujale liigub pisipildi mõõdetud asukohast.
Niipea kui väljub kaotad ära suurema.
|
|
| Kommentaarid: 85 loe/lisa |
Kasutajad arvavad: |
|
:: |
0 :: |
2 :: |
78 |
|
| tagasi üles |
|
|
andrusny
Kreisi kasutaja
liitunud: 20.03.2006
|
|
12.03.2009 21:00:56
|
|
|
See läheb suureks arvutamiseks, ise lahendasin kolme layeriga selle. All on pisipilt (thumb) selle peal on suur pilt ja kõige peal on pisipildiga sama suur tühi läbipaistev layer, millele annad hoveri. Hetkel käivad pildid sisse käsitsi, kuid on plaanis teha automaatne sisselugeja kaustast.
Kel huvi
DEMO
Kood
_________________
|
|
| Kommentaarid: 7 loe/lisa |
Kasutajad arvavad: |
|
:: |
0 :: |
0 :: |
7 |
|
| tagasi üles |
|
|
mikk36
HV Guru
liitunud: 21.02.2004
|
|
12.03.2009 22:28:10
|
|
|
| 10% paistvus on mille jaoks ?
|
|
| Kommentaarid: 85 loe/lisa |
Kasutajad arvavad: |
|
:: |
0 :: |
2 :: |
78 |
|
| tagasi üles |
|
|
andrusny
Kreisi kasutaja
liitunud: 20.03.2006
|
|
12.03.2009 22:31:58
|
|
|
Lihtsalt on, võib ka 0 panna. Kui on 0, siis ei ole alumise pildi kohti üldse näha suure peal.
_________________
|
|
| Kommentaarid: 7 loe/lisa |
Kasutajad arvavad: |
|
:: |
0 :: |
0 :: |
7 |
|
| tagasi üles |
|
|
mikk36
HV Guru
liitunud: 21.02.2004
|
|
12.03.2009 22:34:54
|
|
|
| andrusny kirjutas: |
| Lihtsalt on, võib ka 0 panna. Kui on 0, siis ei ole alumise pildi kohti üldse näha suure peal. |
Ei saa pihta et mille jaoks näha on vaja, teeb ju koledaks oma ruudulisusega.
Aga mõte on hea ja reaalsuses tuleks vast nimekiri php'ga ette anda, ka array'sid tuleks ehk kohendada, tekitada kahedimensiooniline pigem (main array -> item -> thumb + big)
|
|
| Kommentaarid: 85 loe/lisa |
Kasutajad arvavad: |
|
:: |
0 :: |
2 :: |
78 |
|
| tagasi üles |
|
|
andrusny
Kreisi kasutaja
liitunud: 20.03.2006
|
|
12.03.2009 22:42:51
|
|
|
| tsitaat: |
| ka array'sid tuleks ehk kohendada, tekitada kahedimensiooniline |
Mida see juurde annaks? Koodi poolest vist vahet poleks, kas ma võtan selle pildi array st või siis alam osast. Kas mingi mälu kokkuhoid?
_________________
|
|
| Kommentaarid: 7 loe/lisa |
Kasutajad arvavad: |
|
:: |
0 :: |
0 :: |
7 |
|
| tagasi üles |
|
|
mikk36
HV Guru
liitunud: 21.02.2004
|
|
12.03.2009 22:50:43
|
|
|
| Koodi ilu maksab ka midagi
|
|
| Kommentaarid: 85 loe/lisa |
Kasutajad arvavad: |
|
:: |
0 :: |
2 :: |
78 |
|
| tagasi üles |
|
|
andrusny
Kreisi kasutaja
liitunud: 20.03.2006
|
|
19.03.2009 18:35:14
|
|
|
Nüüdseks on väike areng toimunud. Galerii loeb pildid sisse etteantud kaustast ja jagab kausta juppideks, kui pilte rohkem kui korraga ekraanile mahub. Suurus nii thumb kui ka suurtele piltidele tehakse GD abil. Hetkel on se fix ja eriti ei näe ka võimalust seda muuta, kui kuvamine toimub kindlasse aknasse.
DEMO
kood huvilistele
_________________
|
|
| Kommentaarid: 7 loe/lisa |
Kasutajad arvavad: |
|
:: |
0 :: |
0 :: |
7 |
|
| tagasi üles |
|
|
mikk36
HV Guru
liitunud: 21.02.2004
|
|
19.03.2009 18:41:37
|
|
|
| Kas igal laadimisel genereeritakse php'ga uuesti pisipildid ?
|
|
| Kommentaarid: 85 loe/lisa |
Kasutajad arvavad: |
|
:: |
0 :: |
2 :: |
78 |
|
| tagasi üles |
|
|
andrusny
Kreisi kasutaja
liitunud: 20.03.2006
|
|
19.03.2009 18:57:25
|
|
|
Jah, korraga genereeritakse ainult nähtav osa. Pole mõtet ju kogu folderitäit pilte valmis genereerida. Ka suuri pilte ei genereerita kohe valmis, kui vaadatud pole. Pildi aadress näeb midagi taolist välja
| tsitaat: |
| thumbnail2.php?im=".$dir2."pilt.jpg |
Teisele lehele integreerimine peaks ka suht valutult käima. Kuna pildid (pildi nimed ainult) loetakse algul sisse massiivi ei toimu pildi vahetusel ega ka kausta vahetusel mingit refreshi ja muu lehe sisu ei olene galerii tööst.
_________________
|
|
| Kommentaarid: 7 loe/lisa |
Kasutajad arvavad: |
|
:: |
0 :: |
0 :: |
7 |
|
| tagasi üles |
|
|
|
:: KKK
:: otsing 
:: statistika
:: kasutajate nimekiri
:: kasutajate grupid
:: registreeri
teata moderaatorile
