Egy kép részeinek átszínezése külső gombokkal

vlezli képe

Sziasztok!

Az egyik megrendelőm egy számomra szokatlan, eddig még soha nem tapasztalt kéréssel állt elő. Példát is mutatott arra, hogy mit szeretne:

http://www.crlaurence.ca/apps/contentloader/default.aspx?content=www.crl...

Egy zuhanykabinhoz való üvegeket gyártó, külföldi vállalkozóról van szó, aki mindenféle színben és minőségben, mintával és anélkül készíti ezeket az üvegeket.

Azt szeretné, ha a fent idézett honlaphoz hasonlóan lenne az ő honlapjának is az egyik oldalán (akár a címlapon), a baloldalon egy zuhanykabin képe, aminek az üvegrészeit a képtől jobbra lévő gombokkal (föléjük vitt egérrel) át lehetne színezni, illetve mintásra kicserélni, hogy az érdeklődők rögtön lássák, hogy miképp festene a kabin mondjuk halványzöld, vagy füstszínű, aranyszegélyű, stb. üvegrészekkel. Mindezt rögtön, valós időben, az egeret a gombok között navigálva, hol az egyik, hol a másik, hol a harmadik, stb. fölött megállva és annak megfelelően megváltoztatva a zuhanykabin látványát, amiből aztán majd választhat a megrendeléséhez a látvány alapján.

Próbáltam itt is, más fórumokon is keresgélni valami megoldást. De már ott elakadok, hogy a keresőbe írandó kifejezést se nagyon tudom frappánsan megfogalmazni, így persze egyetlen találatot se kaptam.

Itt is csak így körülírva, meg egy megvalósított minta bemutatásával van esélyem a problémám megértetésére. Remélem sikerült.

Kérem, akinek ötlete van a megoldásra, írja meg!

A legjobb az lenne, ha létezne erre valamilyen modul (amihez nem fűzök sok reményt), mert a programozásban nem nagyon vagyok jártas, így valami kész megoldás (modul) beépítése lenne számomra a leginkább járható út.

Drupal 7-et használok. Jelenleg még csak az alapmag feltelepítésével vagyok meg (http://gyapiglass.ca). A szokásos oldalak felrakása nem fog gondot okozni, sokszor csináltam már hasonlót (Services, Quote, About Us, References, Contact, stb.). De addig azokhoz nincs kedvem hozzá se fogni, amíg ezt az egyedi kérést nem sikerül valahogy megoldanom.

Előre is köszönöm, ha valaki megpróbál ötletet adni!

Üdv,
Veres László

Drupal verzió: 
Fórum: 
szantog képe

Ami azon az oldalon van, azt egy teljesen egyszerű views slideshow-val meg lehet csinálni. Ott annyi történik, hogy minden egyes színhez van egy thumbnail kép meg az original feltöltve, és váltogatja hoverre a képeket.

2
0

----
Rájöttem, miért kérdezek olyan ritkán a drupal.hu-n. Amíg szedem össze az infokat a kérdéshez, mindig rájövök a megoldásra.

Sk8erPeter képe

Érdekelne a dolog, hogyan oldható meg ez Views Slideshow-val, mert én biztos kódolnék hozzá: végül is itt csak listázva vannak a képek, aztán valóban onmouseoverre változik a kép, egy egyszerű JavaScript-kód segítségével - például megvan az alapkép, aztán van a többi háttérkép, amire egyszerűen lecserélődik az img tag src attribútuma, például erre, erre, erre, stb., szóval a lényeg csak az, hogy pontosan ugyanakkorák a képek mindig, amik cserélődnek, a gombok ikonjai meg teljesen különálló képmezők (mármint amikre írtad, hogy thumbnailek, de igazából nem azok (úgy értem, a thumbnail az eredetiből készített kisebb kép, ez nem az), hanem egyszerűen más képek gombokról, de értem, mi volt a lényege a mondandónak, átjött), szóval nem egy bonyolult feladat, de nyilván itt pont az a lényeg, hogy kódolni nem tudó egyén is képes legyen megoldani a feladatot.

A Views Slideshow tud tök jó slideshow-kat mutatni nem meglepő módon a jQuery Cycle plugin segítségével, és ez jó, de a konkrét feladatra hogyan alkalmazhatók a V.S. képességei? Itt nem kell slideshow egyáltalán, itt egyszerűen kattintható/hoverre változó képeket kell mutatni, galériaszerűen, amennyiben középen van egy nagykép, oldalt meg kisképek, mintha a Gallery formattert átalakítanád úgy, hogy ne a thumbnail látsszon, hanem egy másik képmező tartalma, és oldalra lenne pakolva a kis gombokról szóló kép; kattintásra/hoverre pedig középen bejön a nagykép.

A lényeg: nem vágom, Views Slideshow-val ez hogyan kattintható össze kódolni nem tudó emberkének, ezért engem is érdekelne.

1
0
eager képe

Annyit tudok dióhéjban, hogy a diavetítés egy multivalue képmező, és pager-ként is lehet használni egy multivalue képmezőt, vagyis alapesetben ugyanazt a képmezőt, aminek a képeit diavetítjük. Csak amikor pager, akkor más képstíluson áthajtva kérjük a képeket.

(Tehát a field-alapú view-ba kétszer veszed fel a képmezőt, egyszer a 'nagy-kép' képstíluson áthajtva, majd még egyszer felveszed fieldnek, itt 'pager' képstílussal, csak ezúttal még 'Exclude from display'-ozod is. Majd a pager-t készítő script elővarázsolja magának.)

(A slideshow beállításai közt van olyan, hogy a 'Pager type' az 'Fields', amit megmondhatsz neki, hogy melyik field legyen.) (Ilyenkor a pager-ség révén a hoveres js-ezést is megkapod.)

Itt az alábbi kommentemben mutattam a linket: http://www.youtube.com/watch?feature=player_embedded&v=k2Olg2M1P18

Ebből is kiderül, gondolom, szerintem jórészt onnan nézhettem ki... Amit biztos nem tudok, az az, hogy hogy nézne az ki, ha a pagerhez használatos képmező nem az, amit nagyban vetítesz. Lehet hogy nem is nagy kihívás, csak nekem általában nem a views irányába tekeregnek az agysejtjeim.

1
0
Sk8erPeter képe

Ja, hogy a Views Slideshow-nál a lapozó is lehet akármelyik mező, na ez így már jobban hangzik!
Viszont akkor meg simán a content type-nál hozzá lehetne adni egy tök másik képmezőt, amibe mindig feltölti az adott node-hoz a megfelelő slideshow-lapozó képet, és beállítja az adott view-nál azt a mezőt, és végül is készen is van.

0
0
szantog képe

Haat, csak így kapásbólfejből.. Kell egy file_entity modul, hogy mezőzhetők legyenek a képek, netán egy saját bundlet is megér a mutatvány. (bár ilyet még nem próbáltam, a mime typeok keverése fe bundlek között érdekes lehet..) Szóval van egy image nevű image field, ami ugye file entitás, és a file entitás - legyen most egyszerűen image - bundlejéhez hozzá adunk egy slideshow_picture - szintén - image fieldet.

Tehát amikor az image nevű imagefieldbe feltöltök egy képet, egy húzásra be is rántom a kis képet. Viewsban ilyenkor már csak egy relationship a file entityre, és hozzá lehet adni mezőként a kis képet, a nagy képet, innentől már általános views_slideshow vudu.

0
0

----
Rájöttem, miért kérdezek olyan ritkán a drupal.hu-n. Amíg szedem össze az infokat a kérdéshez, mindig rájövök a megoldásra.

Sk8erPeter képe

Gondolom az admin/structure/file-types/manage/image/fields oldalon található mezőzésre gondolsz - de egyetlen content type miatt mezőzni akarnád egy slideshow_picture-rel úgy általában az Image file type-ot (entitást)? Nem overkill ez egy kicsit? Akkor aztán lehetne azzal szenvedni, hogy megoldd, hogy a többi képmezőnél, ahol tök felesleges, mondjuk a Media overlay-en ne jelenjen már meg az a slideshow_picture mező, mert oda tök felesleges.
Ahogy eager írta, aszerint úgy tudnám elképzelni az optimális megoldást, hogy egyszerűen ehhez a content type-hoz (amivel felvesszük a különböző kinézetű zuhanykabinokat - persze aztán erre is még ötezer másik lehetőség lenne, hogy legyen megoldva) felveszünk egy slideshow_picture nevű Image fieldet, ha már (és nem az Image file type-hoz, hogy aztán mindenhol ott éktelenkedjen), és minden node-ba betöltjük a nagyképet (az egy másik mező), meg ezt a slideshow picture-t, ami mondjuk a példában látható kis gombokat mutatja. Aztán ezeket listázzuk Views Slideshow-val, és az adott view-ban a pager ez a slideshow_picture mező.

0
0
szantog képe

Ő arról beszélt, hogy felveszi _ugyanazt_ mezőt kétszer, és a képstílusokkal játszik a pagerben. Szinte teljesen biztos vagyok benne, hogy két _különböző mezővel ez nem működik. A views_slideshowban ugyanis a result egy sorában lévő eredménnyel lehet sakkozni, ez viszont nem egy sor lesz.

Továbbá amit írtál, az architect fail. A kis kép struktúrálisan a nagyképhez kapcsolódik. Ha két külön mezőt veszel fel neki, egy totál bizonytalan indexértéken kívül az égvilágon semmi nem köti össze a mezőket. Akkor most képzeld el, hogy van vagy 30 kép egy ajtóhoz! Elég átrendezni a sorrendet az egyikben, a jóisten nem fogja tudni lekövetni a másikban. A kaszkádolt törlésről ne is beszéljünk..

Nálam több helyen van mezőzött file, a kutyát nem zavarja, hogy a formon van még egy mező, arról nem is beszélve, hogy pár sor form_alter ezt a kérdést lekezelni. De még mindig ott van a lehetőség saját file bundle-re, egy saját _file_presave-en vagy validateen kívül nem hiszem, hogy sokkal bonyolultabb lenne megoldani a mimetype issuet - ha van egyáltalán.

1
0

----
Rájöttem, miért kérdezek olyan ritkán a drupal.hu-n. Amíg szedem össze az infokat a kérdéshez, mindig rájövök a megoldásra.

eager képe

Annyira azért nem szokatlan: http://belteri-ajto.hu/belteri-ajtok-mariano

(Nem tudom, hogy ez mivel/hogy készült, csak rögtön eszembe jutott.)

A views slideshow-s ötlet nekem is tetszik. Egyszer régen nekem is kellett csinálni egy hasonlót, kivéve, hogy ott a thumbnail képek és a nagy képek ugyanazon képek különböző képstílusai voltak, tehát nem pont úgy volt, ahogy most neked kell.

Akkor ezeket könyvjelzőztem be magamnak:

cikk:
http://www.bentedder.com/create-an-easy-jquery-slideshow-in-drupal-7/
hozzávaló videó:
http://www.youtube.com/watch?feature=player_embedded&v=k2Olg2M1P18 (emellé azt írtam magamnak anno, hogy nagyon sokat segített)

Illetve még egy cikk:
http://www.webstutorial.com/views-slideshow-drupal-7/featured

0
0
vlezli képe

Mindkettőtöknek köszönöm a tippeket!

A Views-os megoldás nekem is szimpatikus. Most belegondolva dereng, hogy régebben csináltam már valami hasonlót, ahol thumbnail-ekre kattintva feljött nagyban a kép. Bár ott inkább vetítésszerű volt a dolog, Lightbox2-vel megoldva (http://paulschurrasco.com/gallery).

Itt nem teljesen erre volna szükség, hanem pontosan arra a megoldásra, ami Eager hozzászólásában is szerepel mintaként (http://belteri-ajto.hu/belteri-ajtok-mariano).

De ezeken az általatok megemlített tippeken már el tudok indulni, aztán majd meglátjuk!

A hétvégén biztos lesz időm kísérletezni, utána jelentkezem az eredményekkel!

0
0

Veres László