Drupal lightbox disaini uuendamine kasutades css-i
Kuna mulle tundus originaalne lightbox disain igav, tegin kuu eest esimest korda proovi disainidaDrupal Lightbox2 mooduli väljund ümber. Seekord lahendasin selle selle probleemi, kuid siiski ei olnud lahendusega päriselt rahul. Kindlasti paljud lugejad mõtlevad milleks vaev, sest internetis on saadaval mitmeid lightbox kloone. Samas ei ole neil ühelgi nii suurepärast Drupal moodulit nagu seda on Lightbox2. Kuna olen enda arvates teinud päris kena lahenduskäigu tahaksin seda jagada teistegagi.
Niisiis Esmalt seadistasin lightbox mooduli seadetes:
- Kasuta alternatiivset kavandit
-
Eemaldasin read mida ei soovi näidata ja muutsin osad nagu pildil
-
Järgnevalt lisasin tillukese css koodi oma Drupal kavandile tulemus koodi kõrval
#lightshowPlay { display:none; }
#imageDataContainer { height:0px; }
#imageData { color:black; height:50px; background-color:white;
margin-top:5px;
-moz-border-radius: 5px;
-webkit-border-radius:5px;
border-radius: 5px;
-khtml-border-radius:5px; }
#imageData #imageDetails
{ padding-top:10px; }
Ja teise katse kood ja tulemus
#lightshowPlay { display:none; }
#imageDataContainer { height:0px;
position:relative; }
#imageData { color:black;
height:50px; background-image:url(images/white-75.png);
margin-top:-50px;
-moz-border-radius: 5px;
-webkit-border-radius:5px;
border-radius: 5px;
-khtml-border-radius:5px;
position:relative; z-index:1; }
#imageData #imageDetails
{ padding-top:10px; }
Reaalsed näited:
http://jkvandra.ee/gallery