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.
[solved] Showtime: responsive design question
[solved] Showtime: responsive design question
Last edited by luya on Tue Sep 17, 2013 4:58 am, edited 1 time in total.
Re: Showtime: responsive design question
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"
<img width="600" height="360"
Re: Showtime: responsive design question
If the CSS has as below it overrides the with and height attributes.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"
Code: Select all
img {
max-width:100%;
height:auto;
}
Re: Showtime: responsive design question
Here is the attached template that generates slides
{$entry->picture} generate <img src...>. How to remove those width and height parameters from that part? I am not familiar with smarty. 
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 -->Re: Showtime: responsive design question
Here is the css
For some reasons, I cannot see the change within the slideshow.
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;
}
Re: Showtime: responsive design question
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
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
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
Any suggestion? In addition, does news module allow uploading images by default?
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>
Re: Showtime: responsive design question
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.
