Page 1 of 1
[solved] Showtime: responsive design question
Posted: Mon Jul 01, 2013 3:36 am
by luya
Hello,
I am currently working on online magazine and encounter an issue with Showtime 3.2: responsive design. Currently there is no way to set the maximum size of width or height from the slides. You can view the current design still in progress on
http://www.cwmag.ca/stg which use the responsive design layout. Any workaround of the problem?
Thank you in advance.
Re: Showtime: responsive design question
Posted: Mon Jul 01, 2013 3:58 pm
by Dr.CSS
Part of the problem is that the images have the width/height in their call which prevents them from getting smaller...
<img width="600" height="360"
Re: Showtime: responsive design question
Posted: Mon Jul 01, 2013 10:55 pm
by applejack
Dr.CSS wrote:Part of the problem is that the images have the width/height in their call which prevents them from getting smaller...
<img width="600" height="360"
If the CSS has as below it overrides the with and height attributes.
Code: Select all
img {
max-width:100%;
height:auto;
}
Re: Showtime: responsive design question
Posted: Tue Jul 02, 2013 4:08 am
by luya
Here is the attached template that generates slides
Code: Select all
<!-- generated by showtime Module start -->
<__script__ type="text/javascript">
{literal}
$(document).ready(function(){
var lastslide=0;
$('ul#slides_{/literal}{$showid}{literal}').cycle({ {/literal}
{if $show.st_showtext || $show.st_showcomment}
before: onbefore_{$showid},
{/if}
fx: '{$show.st_transition}',
speed: {$show.st_transitiontime},
timeout: {$show.st_rotatetime},
{if $show.st_navbut}
pager: '#slideshow_nav_{$showid}',
{/if}
pagerEvent: 'mouseover',
{if !$show.st_autoplay}
timeout: 0,
{/if}
{if $show.st_shuffle}
random: 1,
{/if}
fastOnEvent: false,
pause: {$show.st_pauseonhover},
pauseOnPagerHover: {$show.st_pauseonhover},
prev: '#prev_{$showid}',
next: '#next_{$showid}'{if $show.st_showtext || $show.st_showcomment},
after: onafter_{$showid}{/if} {literal}
});
$("#slideshow_{/literal}{$showid}{literal}").hover(function() {
$("ul#prevnextnav_{/literal}{$showid}{literal}").fadeIn();
},
function() {
$("ul#prevnextnav_{/literal}{$showid}{literal}").fadeOut();
});
{/literal}{if $show.st_showtext || $show.st_showcomment}{literal}
function onbefore_{/literal}{$showid}{literal}() {
$('#com_{/literal}{$showid}{literal}_'+lastslide).clearQueue();
$('#com_{/literal}{$showid}{literal}_'+lastslide).hide();
}
function onafter_{/literal}{$showid}{literal}(curr, next, opts) {
var index = opts.currSlide;
var indexlast = opts.lastSlide;
$('#com_{/literal}{$showid}{literal}_'+index).queue(function (){
lastslide=index;
$(this).delay(100);
$(this).fadeIn(400);
$(this).dequeue();
});
}
{/literal}{/if}{literal}
});
{/literal}
</__script>
<div id="slideshow_{$showid}" class="pics">
{if $show.st_showtext || $show.st_showcomment}
<div id="comments_st_{$showid}">
{foreach from=$items item=entry}
<div id="com_{$showid}_{$entry->slide_id}" class="commentsparts_st_{$showid}">{if $show.st_showtext}<h2>{$entry->picture_name}</h2>{/if}{if $show.st_showcomment}{$entry->comment}{/if}</div>
{/foreach}
</div>
{/if}
{if $show.st_showcontrols}
<ul id="prevnextnav_{$showid}">
<li id="prev_{$showid}"><a href="#">Previous</a></li>
<li id="next_{$showid}"><a href="#">Next</a></li>
</ul>
{/if}
{if $show.st_navbut}
<div id="slideshow_nav_{$showid}" class="slide_nav_{$showid}"></div>
{/if}
<ul id="slides_{$showid}">
{foreach from=$items item=entry}
<li>{if $entry->picture_url == ""}{$entry->picture}
{else}<a href="{$entry->picture_url}" target="{$entry->picture_url_target}">{$entry->picture}</a>{/if}
</li>
{/foreach}
</ul>
</div>
<!-- generated by showtime Module end -->
{$entry->picture} generate <img src...>. How to remove those width and height parameters from that part? I am not familiar with smarty.
Re: Showtime: responsive design question
Posted: Sun Jul 07, 2013 4:28 am
by luya
Here is the css
Code: Select all
div#slideshow_nav_1{
position:absolute;
z-index: 10;
bottom:0;
right:0;
padding:5px;
}
.slide_nav_1 {
clear:both;
margin:5px 0;
}
.slide_nav_1 a {
background:none repeat scroll 0 0 #EEEEEE;
border:1px solid #CCCCCC;
color:#333333!important;
font-size:10px;
font-weight:bold;
margin:2px;
padding:5px 8px;
line-height:20px;
text-decoration:none;
}
.slide_nav_1 a.activeSlide {
background:none repeat scroll 0 0 #FFFFFF;
color:#333333 !important;
}
.slide_nav_1 a:focus {
outline:medium none;
}
div#slideshow_1 {
max-width:920px;
max-height: 320px; /*padding: 15px 0 0 12px;*/
position: relative; z-index: 5;
overflow: hidden;
margin: 0 auto;
background:#000000;
}
div#slideshow_1 img{
border:none!important;
padding:0;
margin:0;
max-width: 100%;
max-height: auto;
}
div#slideshow_1 ul#prevnextnav_1 {
padding: 0;
display: none;
list-style: none;
position: relative; top: 155px; z-index: 15;
outline:medium none;
margin:0;
}
div#slideshow_1 ul#prevnextnav_1 li#prev_1 {
position:absolute; left:46px; margin: 0;padding: 0;
}
div#slideshow_1 ul#prevnextnav_1 li#next_1 {
position:absolute; left:834px; margin: 0 20px 0 0;padding: 0;
}
div#slideshow_1 ul#prevnextnav_1 li a {
display: block; width: 40px; height: 40px; text-indent: -9999px;
}
div#slideshow_1 ul#prevnextnav_1 li#prev_1 a {
background: url(http://coolest-storm.net/modules/Showtime/templates/jquery/images/prev_40.png);
}
div#slideshow_1 ul#prevnextnav_1 li#next_1 a {
background: url(http://coolest-storm.net/modules/Showtime/templates/jquery/images/next_40.png);
}
div#slideshow_1 ul#slides_1{
list-style: none;padding: 0; margin:0; z-index:5;
max-width:100%; height: auto;
}
div#slideshow_1 ul#slides_1 li {
max-width:100%; height: auto;
margin: 0 0 20px 0;
}
a {outline: none; }
div#comments_st_1{
position:absolute;
font-size:12px;
z-index: 10;
color:#eeeeee;
font-family:_sans, Helvetica, Arial;
width:100%
}
div#comments_st_1 h2{
font-size:16px !important;
color:#eeeeee !important;
margin:0;
padding:0;
}
.commentsparts_st_1{
display:none;
background-color:#000000;
top:0px;
/*opacity: 0.65;*/
background-color: rgba(0, 0, 0, 0.8);
filter: alpha(opacity=65);
padding:10px;
position:relative;
}
For some reasons, I cannot see the change within the slideshow.
Re: Showtime: responsive design question
Posted: Sun Jul 07, 2013 12:50 pm
by applejack
That's because it isn't set by the CSS but by the javascript and unless this was coded in a way to be responsive then you probably can't change it. This is because for certain transitions to work it needs to be a fixed dimension. I suggest you look for a slider which is responsive such as Flexslider.
Re: Showtime: responsive design question
Posted: Tue Jul 09, 2013 3:29 am
by luya
Thank you for mentioning Flexslider. It seems to be a suitable slider for my desired customization. Sequencejs is another candidate too.
Re: Showtime: responsive design question
Posted: Sun Sep 15, 2013 4:43 am
by luya
Following up the quest for a responsive slider, I ended up with unslider because of its better markup structures and minimal use of jQuery. Using
https://www.cmscanbesimple.org/blog/cre ... -or-images as guideline, I encountered an issue with CGSmartImage which will not display the remaining slide. Here is the code of custom news summary
Code: Select all
{strip}
{capture assign=submitted_images}{$entry->file_location}/{$entry->fieldsbyname.Images->value}{/capture}
<div class="banner">
<ul>
{foreach from=$items item='entry'}
<!-- .news-article (wrapping each article) -->
<li>
<a href='{$entry->moreurl}' title='{$entry->title|cms_escape:htmlall}' class="slide">
{if $entry->fieldsbyname.Images->value != ''}
{CGSmartImage filter_croptofit="700,240,c" noembed='0' quality='85' src="{$entry->file_location}/{$entry->fieldsbyname.Images->value}" alt="{$entry->title}"}
{/if}
<!-- footer class="slide-desc" -->
{* <h2>{$entry->title|cms_escape}</h2>
{if $entry->summary}
<p>{eval var=$entry->summary|strip_tags}
<span class='more'> {$entry->morelink} →</span></p>
{else if $entry->content}
<p>{eval var=$entry->content|strip_tags}</p>
{/if} *}
<!-- /footer //-->
</a>
</li>
<!-- .news-article //-->
{/foreach}
</ul>
<!-- .news-summary //-->
</div>
Any suggestion? In addition, does news module allow uploading images by default?
Re: Showtime: responsive design question
Posted: Tue Sep 17, 2013 4:57 am
by luya
Answering my own question. I adopted unslider to do a nice news slideshow due to its lean markup. There is some quirks to address like the inclusion of buttons within the slide. I consider this post as solved.