Skip to content

Instantly share code, notes, and snippets.

@alisamii

alisamii/config.xml

Last active December 14, 2015 08:18
Show Gist options
  • Save alisamii/5056594 to your computer and use it in GitHub Desktop.
Save alisamii/5056594 to your computer and use it in GitHub Desktop.
Download ZIP
YooTheme WidgetKit Gallery Style "Betelec"
Raw
config.xml
<?xml version="1.0" encoding="utf-8"?>
<style name="betelec" label="Betelec">
<settings>
<setting name="thumb_width" label="Thumbnail Width" type="text" default="298" />
<setting name="thumb_height" label="Thumbnail Height" type="text" default="133" />
<setting name="autoplay" label="Autoplay" type="radio" default="0">
<option value="1">Yes</option>
<option value="0">No</option>
</setting>
<setting name="interval" label="Autoplay Interval (ms)" type="text" default="5000" />
<setting name="duration" label="Effect Duration (ms)" type="text" default="500" />
<setting name="index" label="Start Index" type="text" default="0" />
<setting name="buttons" label="Buttons" type="radio" default="0">
<option value="1">Show</option>
<option value="0">Hide</option>
</setting>
<setting name="slices" label="Slices" type="text" default="8" />
<setting name="animated" label="Effect" type="list" default="fade">
<option value="fade">Fade</option>
<option value="slide">Slide</option>
<option value="scroll">Scroll</option>
<option value="swipe">Swipe</option>
<option value="sliceUp">SliceUp</option>
<option value="sliceDown">SliceDown</option>
<option value="sliceUpDown">SliceUpDown</option>
<option value="fold">Fold</option>
<option value="puzzle">Puzzle</option>
<option value="boxes">Boxes</option>
<option value="boxesReverse">BoxesReverse</option>
<option value="kenburns">KenBurns</option>
<option value="rotate">Rotate</option>
<option value="scale">Scale</option>
<option value="randomSimple">RandomSimple</option>
<option value="randomFx">RandomFx</option>
</setting>
<setting name="caption_animation_duration" label="Caption Animation Duration" type="text" default="500" />
<setting name="effect" label="Slideset Effect" type="list" default="slide">
<option value="slide">Slide</option>
<option value="zoom">Zoom</option>
<option value="deck">Deck</option>
<option value="drops">Drops</option>
</setting>
<setting name="slideset_buttons" label="Slideset Buttons" type="radio" default="0">
<option value="1">Show</option>
<option value="0">Hide</option>
</setting>
<setting name="items_per_set" label="Items Per Set" type="text" default="4" />
<setting name="slideset_effect_duration" label="Slideset Effect Duration (ms)" type="text" default="300" />
</settings>
</style>
Raw
style.css
/* Copyright (C) YOOtheme GmbH, YOOtheme Proprietary Use License (http://www.yootheme.com/license) */
/*
* Widgetkit Gallery: Betelec Style
*/
/* Slideshow: Buttons
----------------------------------------------------------------------------------------------------*/
.wk-gallery-betelec .slides-container { position: relative; }
.wk-gallery-betelec .slides-container:hover .next,
.wk-gallery-betelec .slides-container:hover .prev {
top: 50%;
width: 50px;
height: 50px;
margin-top: -25px;
background: url(images/buttons.png) 0 50px no-repeat;
}
.wk-gallery-betelec .slides-container:hover .next {
right: 30px;
background-position: 0 0;
}
.wk-gallery-betelec .slides-container:hover .prev {
left: 30px;
background-position: 0 -50px;
}
/* Slideset: Container
----------------------------------------------------------------------------------------------------*/
.wk-gallery-betelec .wk-slideset > div { padding: 0 60px; }
.wk-gallery-betelec .wk-slideset.no-buttons > div { padding: 0; }
.wk-gallery-betelec .wk-slideset .sets { padding: 10px 0 3px 0; }
/* Slideset: Content
----------------------------------------------------------------------------------------------------*/
.wk-gallery-betelec .wk-slideset .set > li > div {
margin: 0 3px;
cursor: pointer;
}
.wk-gallery-betelec .wk-slideset .set > li > div > img { display: block; }
.wk-gallery-betelec .wk-slideset .set > li > div {background: #00a88f;}
.wk-gallery-betelec .wk-slideset .set:hover > li > div > img { opacity: 1; }
.wk-gallery-betelec .wk-slideset .set > li > div > img:hover { opacity: 0.4; }
.wk-gallery-betelec .wk-slideset .set > li > div > img:active { opacity: 0; }
/* Transition */
.wk-gallery-betelec .wk-slideset .set:hover > li > div {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
/* Slideset: Buttons
----------------------------------------------------------------------------------------------------*/
.wk-gallery-betelec .wk-slideset > div { position: relative; }
.wk-gallery-betelec .wk-slideset > div .next,
.wk-gallery-betelec .wk-slideset > div .prev {
top: 50%;
width: 30px;
height: 30px;
margin-top: -13px;
background: url(images/navigation_buttons.png) 0 30px no-repeat;
}
.wk-gallery-betelec .wk-slideset > div .next {
right: 25px;
background-position: 0 0;
}
.wk-gallery-betelec .wk-slideset > div .prev {
left: 25px;
background-position: 0 -90px;
}
.wk-gallery-betelec .wk-slideset > div .next:hover { background-position: 0 -30px; }
.wk-gallery-betelec .wk-slideset > div .next:active { background-position: 0 -60px; }
.wk-gallery-betelec .wk-slideset > div .prev:hover { background-position: 0 -120px; }
.wk-gallery-betelec .wk-slideset > div .prev:active { background-position: 0 -150px; }
/* Slideset: Buttons
----------------------------------------------------------------------------------------------------*/
.betelec-caption {
position: absolute;
top: 0;
text-align: left;
padding-left: 25px;
text-transform: uppercase;
font-size: 0.9em;
background:
rgba(0,0,0,0.6);
width: 100%;
}
.betelec-captions {
list-style-type: none;
margin-left: 0;
}
/* Responsive
----------------------------------------------------------------------------------------------------*/
/* Only Touch Devices */
@media (max-device-width: 1024px) {
.wk-gallery-betelec .slides-container .next,
.wk-gallery-betelec .slides-container .prev { display: none; }
}
Raw
template.php
<?php
/**
*
* @package Widgetkit
* @version template.php 1001 13-02-28 12:03:38 alisamii
* @author Place Neuve http://www.placeneuve.com
* @copyright Copyright (C) 2013 Place Neuve (Suisse) S.A.
* @license http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 only
*
**/
$widget_id = $widget->id.'-'.uniqid();
$settings = $widget->settings;
$captions = array();
$images = $this['gallery']->images($widget);
$thumbs = $this['gallery']->images($widget, array('width' => $settings['thumb_width'], 'height' => $settings['thumb_height']));
$sets = array_chunk($thumbs, $settings['items_per_set']);
foreach (array_keys($sets) as $s) {
$nav[] = '<li><span></span></li>';
}
$i = 0;
?>
<?php if (count($images)) : ?>
<div id="gallery-<?php echo $widget_id; ?>" class="wk-gallery-betelec" data-widgetkit="showcase" data-options='<?php echo json_encode($settings); ?>'>
<div id="slideshow-<?php echo $widget_id; ?>" class="wk-slideshow">
<div class="slides-container">
<ul class="slides">
<?php foreach ($images as $image) : ?>
<?php
$captions[] = '<li>'.(strlen($image['caption']) ? $image['caption']:"").'</li>';
/* Prepare Image */
$content = '<img src="'.$image['cache_url'].'" width="'.$image['width'].'" height="'.$image['height'].'" alt="'.$image['filename'].'" />';
/* Lazy Loading */
$content = ($i==$settings['index']) ? $content : $this['image']->prepareLazyload($content);
?>
<?php if ($image['link']) : ?>
<li><a class="" href="<?php echo $image['link'] ? $image['link'] : $image['url']; ?>"><?php echo $content; ?></a></li>
<?php else : ?>
<li><?php echo $content; ?></li>
<?php endif; ?>
<?php $i=$i+1;?>
<?php endforeach; ?>
</ul>
<?php if ($settings['buttons']): ?><div class="next"></div><div class="prev"></div><?php endif; ?>
</div>
</div>
<div id="slideset-<?php echo $widget_id;?>" class="wk-slideset <?php if (!$settings['slideset_buttons']) echo 'no-buttons'; ?>">
<div>
<div class="sets">
<?php foreach ($sets as $set => $items) : ?>
<ul class="set">
<?php foreach ($items as $thumb) : ?>
<?php
/* Prepare Image */
$content = '<img src="'.$thumb['cache_url'].'" width="'.$thumb['width'].'" height="'.$thumb['height'].'" alt="'.$thumb['filename'].'" />';
?>
<li><div><?php echo $content; ?><div class="betelec-caption"><ul class="betelec-captions"><?php echo implode('', $captions);?></ul></div></div></li>
<?php endforeach; ?>
</ul>
<?php endforeach; ?>
</div>
<?php if ($settings['slideset_buttons']): ?><div class="next"></div><div class="prev"></div><?php endif; ?>
</div>
</div>
</div>
<?php else : ?>
<?php echo "No images found."; ?>
<?php endif;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment