Skip to content

Commit

Permalink
Slideshow: Updated to use jCycle Lite
Browse files Browse the repository at this point in the history
  • Loading branch information
vlucas committed Jul 18, 2011
1 parent dcc8f36 commit 311ef1c
Show file tree
Hide file tree
Showing 5 changed files with 43 additions and 93 deletions.
12 changes: 11 additions & 1 deletion app/www/assets/admin/styles/cms_admin.css
Expand Up @@ -13,6 +13,7 @@ ADMIN UI
font-family: Arial, Tahoma, sans-serif;
line-height: 1;
text-transform: none;
text-shadow: none;
}
/* FORM styles */
.cms_ui form {
Expand Down Expand Up @@ -117,7 +118,7 @@ ADMIN BAR
#cms_admin_bar_inside { height: 24px; overflow: hidden; }
/* Navigation */
#cms_admin_bar ul { list-style: none; margin: 0; padding: 0; }
#cms_admin_bar ul li { float: left; margin: 0; }
#cms_admin_bar ul li { float: left; margin: 0; padding: 0; }
#cms_admin_bar ul li a {
display: block;
padding: 7px 10px 8px 10px;
Expand Down Expand Up @@ -287,13 +288,15 @@ div.cms_ui_pane {
visibility: hidden;
z-index: 980;
background: #666;
font-family: Arial, Tahoma, sans-serif;
}
#cms_admin_modules h3 {
margin: 0;
padding: 6px 4px;
background: #333;
color: #fff;
font-size: 12px;
font-family: Arial, Tahoma, sans-serif;
}
#cms_admin_modules .cms_module_tile {
float: left;
Expand All @@ -313,6 +316,7 @@ div.cms_ui_pane {
#cms_admin_modules .cms_module_tile_icon {
width: 100%;
padding: 10px 0;
margin: 0 auto;
text-align: center;
}

Expand Down Expand Up @@ -366,6 +370,8 @@ REGION / MODULE UI
width: 200px;
height: 21px;
overflow: visible;
font-family: Arial, Tahoma, sans-serif;
font-size: 12px;
color: #eee;
background: #333;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#444), to(#222));
Expand Down Expand Up @@ -413,10 +419,14 @@ REGION / MODULE UI
}
.cms_module .cms_ui_controls ul li a {
display: block;
margin: 0;
padding: 5px;
color: #fff;
text-decoration: none;
text-transform: none;
text-shadow: none;
font-family: Arial, Tahoma, sans-serif;
font-size: 11px;
}
.cms_module .cms_ui_controls ul li a:hover, #imNav li.active a {
background-color: #AFAFAF;
Expand Down
13 changes: 6 additions & 7 deletions app/www/assets/styles/cms_modules.css
Expand Up @@ -60,7 +60,7 @@
* Slideshow Module
*/
.module_slideshow,
.module_slideshow .slideshow_container {
.module_slideshow .module_slideshow_container {
position: relative;
}
.module_slideshow .pagination {
Expand Down Expand Up @@ -90,22 +90,21 @@
.module_slideshow .pagination li.current a {
background-color: #ccc;
}
.module_slideshow .slideshow_item_caption {
.module_slideshow .module_slideshow_item_caption {
position: absolute;
z-index: 10;
bottom: -35px;
bottom: 0;
left: 0;
width: 100%;
height: 30px;
padding: 5px 10px 0 10px;
height: 35px;
background: #000;
background: rgba(0,0,0,0.5);
color: #fff;
border-top: 1px solid #000;
}
.module_slideshow .slideshow_item_caption p {
.module_slideshow .module_slideshow_item_caption p {
margin: 0;
padding: 0;
padding: 5px 10px 5px 10px;
}

.app_errors {
Expand Down

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

This file was deleted.

52 changes: 15 additions & 37 deletions app/www/content/Module/Slideshow/views/indexAction.html.php
@@ -1,56 +1,34 @@
<?php
$slideshowId = 'slideshow_' . $module->id;
$slideshowId = 'module_slideshow_' . $module->id;
$assetsUrl = $kernel->config('url.root') . $kernel->config('cms.dir.modules') . 'Module/' . $module->name . '/assets/';
?>

<div id="<?php echo $slideshowId; ?>" class="slideshow_wrapper">
<div class="slideshow_container">
<?php foreach($items as $item): ?>
<div class="slideshow_item">
<div id="<?php echo $slideshowId; ?>" class="module_slideshow_wrapper">
<?php foreach($items as $item): ?>
<div class="module_slideshow_item">
<?php if($item->link): ?><a href="<?php echo $item->link; ?>"><?php endif; ?><img src="<?php echo $item->url; ?>" alt="<?php echo $item->caption; ?>" /><?php if($item->link): ?></a><?php endif; ?>
<?php if($item->caption): ?>
<div class="slideshow_item_caption"><p><?php echo $item->caption; ?></p></div>
<div class="module_slideshow_item_caption"><p><?php echo $item->caption; ?></p></div>
<?php endif; ?>
</div>
<?php endforeach; ?>
</div>
<?php endforeach; ?>
</div>

<script type="text/javascript">
$('#<?php echo $slideshowId; ?>').slides({
container: 'slideshow_container',
preload: true,
preloadImage: '<?php echo $assetsUrl; ?>images/loading.gif',
play: <?php echo (int) $module->setting('slide_delay', 5000); ?>,
pause: <?php echo (int) $module->setting('slide_delay', 5000); ?>,
slideSpeed: <?php echo (int) $module->setting('slide_speed', 5000); ?>,
hoverPause: true,
crossfade: true,
animationStart: function(current) {
$('.slideshow_item_caption').stop().animate({
bottom: -35
},100);
},
animationComplete: function(current) {
$('.slideshow_item_caption').stop().animate({
bottom:0
},200);
},
slidesLoaded: function() {
$('.slideshow_item_caption').stop().animate({
bottom:0
},200);
// @link http://jquery.malsup.com/cycle/lite/
$('#<?php echo $slideshowId; ?>').cycle({
delay: <?php echo (int) $module->setting('slide_delay', 5000); ?>,
speed: <?php echo (int) $module->setting('slide_speed', 2000); ?>,
pause: true,
height: <?php echo (int) $module->setting('height', 300); ?>,
before: function() {
console.log(this);
}
});
</script>

<?php
// Add javsacript for slideshow to page
$asset = $view->helper('Asset');
$view->head()->script($assetsUrl . '/scripts/jquery.slides.min.js');
$view->head()->append('
<style type="text/css">
#' . $slideshowId . ' .slides_container { position: relative; width: ' . (int) $module->setting('width', 400) . 'px; display: none; }
#' . $slideshowId . ' .slideshow_item { width: ' . (int) $module->setting('width', 400) . 'px; height: ' . (int) $module->setting('height', 300) . 'px; display: block; }
</style>');
$view->head()->script($assetsUrl . '/scripts/jquery.cycle.lite.min.js');
?>

0 comments on commit 311ef1c

Please sign in to comment.