Sliding Boxes mit Drupal
Der Artikel über Sliding Boxes and Captions with jQuery hat uns sehr inspiriert. Bei der Betrachtung von Bildern sind die viele Zusatz Information oft störend. Auch werden dadurch das Design sowie die Benutzerfreundlichkeit erschwert.
Ihre Website und Facebook?
Erfahrungen mit einer Drupal Facebook Anwendung
Durch einige Anpassungen an Drupal, lassen sich Bilder mit Schiebefenster versehen. Dabei wird auf die in Drupal integrierte jQuery Bibliothek zurückgegriffen.
Prinzip
Das Prinzip basiert auf einer Ebene welche sich durch Benutzerereignisse steuern lässt. In Einsatz mit Hintergrundsbildern ist dieser Effekt sehr eindrucksvoll. Wir beschränken uns auf das hover Ereignis.
CSS erweitern
Durch einige CSS Definitionen, bilden wir die Bühne (inkl. Hintergrundsbild) ab.
1 2 3 4 56 7 8 9 1011 12 13 14 1516 17 | .boxgrid{
width: 315px;
height: 125px;
margin:10px;
float:left; background:#161613;
border: solid 2px #8399AF;
overflow: hidden;
position: relative;
}
.boxgrid img {
position: absolute;
top: 0;
left: 0; border: 0;
} |
Durch weitere CSS Definitionen, bilden wir das Halbtransparente Schiebefenster sowie die Ausgangslage ab.
1 2 3 4 56 7 8 9 1011 12 13 14 1516 17 18 19 2021 22 23 24 2526 27 | .boxcaption{
padding:5px;
float: left;
position: absolute;
background: #000; height: 215px;
width: 100%;
opacity: .6;
/* For IE 5-7 */
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60); /* For IE 8 */
-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
}
.captionfull .boxcaption { top: -375;
left: 0;
}
.boxcaption h3 {
}
.caption .boxcaption {
top: -215; left: 0;
} |
Drupal Template erstellen
Wie haben uns entschieden diesen Inhaltstyp photoframe zu nennen.
Dieser Inhaltstyp besitzt ein CCK Image Field namens field_bgimage
Das Bild wird mittels Image Cache auf eine Grösse von 315x125 skaliert.
Um das Erscheinen zu steuern greifen wir auf die Drupal Template Engine zurück und bilden ein node.tpl.php für den erstellten Inhatstyp ab.
node-photoframe.tpl.php
1
2
3
4
56
7
8
| <div class="boxgrid captionfull"><br />
<?php echo theme('imagecache', 'photoframe' ,$node->field_bgimage[0]['filename']);?><br />
<div class="cover boxcaption"><br />
<h3><?php print $title ?></h3><br />
<?php print $node->content['body']['#value'];?><br /><?php if ($links): ?><div class="links"><?php print $links ?></div><?php endif; ?><br />
</div>
</div> |
jQuery einsetzen
Um nun die Ebene des Schiebefenster mittels jQuery zu steuern erweitern wir das bestehende photoframe template.
1 2 3 4 56 7 8 9 1011 | <script type="text/javascript"><br />
$(document).ready(function() {<br />
$('.cover.boxcaption').stop().animate({top:'85px'},{queue:false,duration:1500});<br />
//Full Caption Sliding (Hidden to Visible)<br />
$('.boxgrid.captionfull').hover(function(){<br /> $(".cover", this).stop().animate({top:'15px'},{queue:false,duration:160});<br />
}, function() {<br />
$(".cover", this).stop().animate({top:'85px'},{queue:false,duration:160});<br />
});
});</script> |
