Created
January 21, 2015 10:24
-
-
Save schmanat/cafd7d74fcb2e08a292b to your computer and use it in GitHub Desktop.
Gallery Creator Template for Caption Hover Effects (codrops)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.mod_gallery_creator { | |
ul { | |
margin: 0 auto; | |
list-style: none; | |
li.grid4 { | |
display: inline-block; | |
margin: 0; | |
padding: 1em; | |
position: relative; | |
figure { | |
margin: 0; | |
position: relative; | |
overflow: hidden; | |
&:hover figcaption, | |
&:focus figcaption { | |
opacity: 1; | |
transform: translateY(0); | |
@include transition(transform 0.4s, opacity 0.1s); | |
} | |
&:hover img, | |
&:focus img { | |
transform: translateY(-50px); | |
} | |
img { | |
position: relative; | |
display: block; | |
width: 100%; | |
@include transition(transform 0.4s); | |
} | |
} | |
figcaption { | |
position: absolute; | |
top: auto; | |
left: 0; | |
bottom: 0; | |
padding: 20px; | |
background: $color-cloud; | |
color: $color-emperor; | |
height: 100px; | |
width: 100%; | |
opacity: 0; | |
transform: translateY(100%); | |
@include transition(transform 0.4s, opacity 0.1s 0.3s); | |
h4 { | |
margin: 0; | |
padding: 0; | |
color: $color-emperor; | |
} | |
span { | |
} | |
a { | |
text-align: center; | |
padding: .5em 1em; | |
@include border-radius($border-radius); | |
display: inline-block; | |
background: $color-green-leaf; | |
color: $color-white; | |
position: absolute; | |
text-decoration: none; | |
bottom: 10px; | |
right: 10px; | |
&:hover { | |
background: $color-white; | |
color: $color-green-leaf; | |
@include transition(all 0.8s); | |
} | |
} | |
} | |
} | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php if (!\Input::get('items')): ?> | |
<!-- galler_creator - album list --> | |
<div class="block <?php echo $this->class; ?>"> | |
<?php echo $this->pagination; ?> | |
<?php if (count($this->arrAlbums)>0): ?> | |
<ul class="block"> | |
<?php foreach($this->arrAlbums as $Album): ?> | |
<li class="grid4"> | |
<figure class="image_container"> | |
<img src="<?php echo $Album['thumb_src']; ?>" alt="<?php echo $Album['alt']; ?>" class="<?php echo $Album['class']; ?>"> | |
<figcaption> | |
<h4><?php echo $Album['name']; ?></h4> | |
<?php if ($Album['count']): ?> | |
<span class="count_pics"><?php echo $Album['count']; ?> <?php echo $GLOBALS['TL_LANG']['gallery_creator']['pictures']; ?></span> | |
<?php endif; ?> | |
<?php if ($Album['count_subalbums']): ?> | |
<span class="count_pics"><?php echo $Album['count_subalbums']; ?> <?php echo $GLOBALS['TL_LANG']['gallery_creator']['subalbums']; ?></span> | |
<?php endif; ?> | |
<?php if ($Album['href']): ?> | |
<a href="<?php echo $Album['href']; ?>" title="<?php echo $Album['title']; ?>">Bilder ansehen</a> | |
<?php endif; ?> | |
</figcaption> | |
</figure> | |
</li> | |
<?php endforeach; ?> | |
</ul> | |
<?php endif; ?> | |
<?php echo $this->pagination; ?> | |
</div> | |
<?php endif; ?> | |
<?php if (\Input::get('items')): ?> | |
<!-- gallery_creator - album preview --> | |
<div class="block <?php echo $this->class; ?>"> | |
<?php if ($this->insertArticlePre):?> | |
<!-- articleBoxPre--> | |
<div id="articleBoxPre" class="block"> | |
<?php echo $this->insertArticlePre; ?> | |
</div> | |
<!-- end articleBoxPre--> | |
<?php endif; ?> | |
<?php if ($this->headline): ?> | |
<<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>> | |
<?php endif; ?> | |
<?php if ($this->backLink): ?> | |
<div class="backLink"><a href="<?php echo $this->backLink; ?>" title="zurück">« <?php echo $GLOBALS['TL_LANG']['gallery_creator']['back_to_general_view']; ?></a></div> | |
<?php endif; ?> | |
<?php if ($this->Albumname): ?> | |
<h2><?php echo $this->Albumname; ?></h2> | |
<?php endif; ?> | |
<!-- subalbums begin --> | |
<?php if ($this->subalbums): ?> | |
<div class="subalbums"> | |
<h3><?php echo $GLOBALS['TL_LANG']['gallery_creator']['subalbums_of']; ?>: <?php echo $this->Albumname; ?></h3> | |
<ul class="list_albums"> | |
<?php foreach ($this->subalbums as $Subalbum): ?> | |
<li class="level_1 block"<?php echo $this->imagemargin ? 'style="'.$this->imagemargin.'"' : ''; ?>> | |
<div class="tstamp block"><p>[<?php echo $Subalbum['event_date']; ?>]</p></div> | |
<div class="col_1"> | |
<figure class="image_container" onmouseover="<?php echo $Subalbum['thumbMouseover']; ?>"> | |
<?php if ($Subalbum['href']): ?> | |
<a href="<?php echo $Subalbum['href']; ?>" title="<?php echo $Subalbum['title']; ?>"> | |
<?php endif; ?> | |
<img src="<?php echo $Subalbum['thumb_src']; ?>" width="<?php echo $Subalbum['size'][0]; ?>" height="<?php echo $Subalbum['size'][1]; ?>" alt="<?php echo $Subalbum['alt']; ?>" class="<?php echo $Subalbum['class']; ?>"> | |
<?php if ($Subalbum['href']): ?> | |
</a> | |
<?php endif; ?> | |
</figure> | |
</div> | |
<div class="col_2"> | |
<h2><?php echo $Subalbum['name']; ?></h2> | |
<?php if ($Subalbum['count']): ?> | |
<p class="count_pics"><?php echo $Subalbum['count']; ?> <?php echo $GLOBALS['TL_LANG']['gallery_creator']['pictures']; ?></p> | |
<p class="visitors"><?php echo $Subalbum['visitors']; ?> <?php echo $GLOBALS['TL_LANG']['gallery_creator']['visitors']; ?></p> | |
<?php endif; ?> | |
<?php if ($Subalbum['count_subalbums']): ?> | |
<p class="count_pics"><?php echo $Subalbum['count_subalbums']; ?> <?php echo $GLOBALS['TL_LANG']['gallery_creator']['subalbums']; ?></p> | |
<?php endif; ?> | |
<?php if ($Subalbum['comment']): ?> | |
<p class="album_comment"><?php echo $Subalbum['comment']; ?></p> | |
<?php endif; ?> | |
</div> | |
</li> | |
<?php endforeach; ?> | |
</ul> | |
</div> | |
<?php endif; ?> | |
</div> | |
<?php endif; ?> | |
<?php if ($this->albumComment): ?> | |
<div class="albumComment"> | |
<p><?php echo $this->albumComment; ?></p> | |
</div> | |
<?php endif; ?> | |
<?php echo $this->pagination; ?> | |
<!-- Detailview --> | |
<?php $col=0; ?> | |
<?php if ($this->arrPictures): ?> | |
<div id="galleryContainer" class="block"> | |
<ul class="block album_preview"> | |
<?php foreach ($this->arrPictures as $Picture): ?> | |
<li class="grid4 col_<?php echo $col; ?><?php echo ($col == 0 ? ' col_first' : ''); ?><?php echo ($col == $this->colsPerRow - 1 ? ' col_last' : ''); ?>"> | |
<figure <?php echo (strlen($Picture['cssID']) ? ' id="' . $Picture['cssID'] . '"' : ''); ?> class="image_container <?php echo strlen($Picture['cssClass']) ? ' ' . $Picture['cssClass'] : ''; ?>" <?php echo $this->imagemargin ? ' style="'.$this->imagemargin.'"' : ''; ?>> | |
<?php if ($Picture['href']): ?> | |
<a href="<?php echo $Picture['href']; ?>" <?php echo $Picture['lightbox']; ?> title="<?php echo $Picture['comment'] ? $Picture['comment'] : ($Picture['title'] ? $Picture['title'] : $Picture['filename']); ?>"> | |
<?php endif; ?> | |
<img src="<?php echo $Picture['thumb_src']; ?>" width="<?php echo $Picture['size'][0]; ?>" height="<?php echo $Picture['size'][1]; ?>" alt="<?php echo $Picture['alt']; ?>"> | |
<?php if ($Picture['href'] != ''): ?> | |
</a> | |
<?php endif; ?> | |
</figure> | |
</li> | |
<?php $col++;?> | |
<?php if ($col == $this->colsPerRow) $col=0; ?> | |
<?php endforeach; ?> | |
</ul> | |
</div> | |
<?php endif; ?> | |
<?php if ($this->insertArticlePost):?> | |
<!-- articleBoxPre--> | |
<div id="articleBoxPost" class="block"> | |
<?php echo $this->insertArticlePost; ?> | |
</div> | |
<!-- end articleBoxPost--> | |
<?php endif; ?> | |
<?php //echo $this->pagination; ?> | |
</div> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi Manuel
Thank you for sharing this template.
Marko