Developing (v7+)

Slideshow with responsive Themes and/or different picture heights

Permalink 5 users found helpful November 22, 2012 at 9:02 AM

Hi There,

problem:

using a responsive layout with a slideshow creates bad effects, as the wrapper size is set to the true height of the picture, and not to the displayed size. Also the slideshow creates a background-image, which doesn't resize at all to fit into the page.
Example: using img {max-width: 100%) with an image sized 800x600 looks nice in the fullsized website, but on a mobile device the wrapper is still set to 600px height, but the displayed height is around 400px. so 200px of space are wasted.

solution:

modify the blocks/slideshow/view.php like this:

<?php  defined('C5_EXECUTE') or die("Access Denied."); ?>
<script type="text/javascript">
//<![CDATA[
var ccmSlideShowHelper<?php echo intval($bID)?> = {
   bID:<?php echo intval($bID)?>,
   imgNum:0,
   init:function(){
      this.displayWrap=$('#ccm-SlideshowBlock-display'+this.bID); 
      if(this.imgInfos.length==0){
         return false;
      }
      var maxHeight=0;
      for(var i=0;i<this.imgInfos.length;i++){
         this.addImg(i);
         if(maxHeight==0 || this.imgInfos[i].imgHeight > maxHeight)

Viewing 15 lines of 91 lines. View entire code block.

 
<?php  defined('C5_EXECUTE') or die("Access Denied."); ?>
 
<script type="text/javascript">
//<![CDATA[
var ccmSlideShowHelper<?php echo intval($bID)?> = {
 
   bID:<?php echo intval($bID)?>,
   imgNum:0,
 
   init:function(){
      this.displayWrap=$('#ccm-SlideshowBlock-display'+this.bID); 
      if(this.imgInfos.length==0){
         return false;
      }
      var maxHeight=0;
      for(var i=0;i<this.imgInfos.length;i++){
         this.addImg(i);
         if(maxHeight==0 || this.imgInfos[i].imgHeight > maxHeight)
            maxHeight=this.imgInfos[i].imgHeight;
      }
      //this.displayWrap.css('height',maxHeight);
 
      $('#slideImgWrap0').css('display','block');
      $('#slideImgWrap0').children(':first').load(function() {
           var imageHeight = $(this).height(); 
           $('#slideImgWrap0').parent().animate({height:imageHeight, queue: false},500);
       });
 
      this.nextImg();
   }, 
   nextImg:function(){
      if(this.imgNum>=this.imgInfos.length) this.imgNum=0;  
      this.imgEls[this.imgNum].css('opacity',0);
      var newheight = $('#slideImgWrap'+this.imgNum).height();
      this.imgEls[this.imgNum].css('display','block');
      $('#ccm-SlideshowBlock-display'+this.bID).animate({height:newheight, queue: false},this.imgInfos[this.imgNum].fadeDuration*1000);
      this.imgEls[this.imgNum].animate({opacity:1, queue: false},
         this.imgInfos[this.imgNum].fadeDuration*1000,'',function(){ccmSlideShowHelper<?php echo intval($bID)?>.preparefadeOut()});
      var prevNum=this.imgNum-1;
      if(prevNum<0) prevNum=this.imgInfos.length-1;
      if(this.imgInfos.length==1) return;
      this.imgEls[prevNum].animate({opacity:0},this.imgInfos[this.imgNum].fadeDuration*800,function(){this.style.zIndex=1;});
   },
   preparefadeOut:function(){
      if(this.imgInfos.length==1) return;
      var milisecDuration=parseInt(this.imgInfos[this.imgNum].duration)*1000;
      this.imgEls[this.imgNum].css('z-index',2);
      setTimeout('ccmSlideShowHelper'+<?php echo intval($bID)?>+'.nextImg();',milisecDuration);
      this.imgNum++;
   },
   maxHeight:0,
   imgEls:[],
   addImg:function(num){
      var el=document.createElement('div');
      el.id="slideImgWrap"+num;
      el.className="slideImgWrap"; 
      if(this.imgInfos[num].fullFilePath.length>0)
          imgURL=this.imgInfos[num].fullFilePath;
      else imgURL='<?php echo REL_DIR_FILES_UPLOADED?>/'+this.imgInfos[num].fileName; 
      el.innerHTML='<img src="'+imgURL+'" >';
      //el.innerHTML='<div style="height:'+this.imgInfos[num].imgHeight+'px; background:url(\''+escape(imgURL)+'\') center no-repeat"> </div>';
 
      el.style.display='none';
      this.displayWrap.append(el);
      var jqEl=$(el);
      this.imgEls.push(jqEl);
   },
 
   imgInfos:[
   <?php  
   $notFirst=1;
   foreach($images as $imgInfo) {
      $f = File::getByID($imgInfo['fID']);
      $fp = new Permissions($f);
      if ($fp->canRead()) {
         if(!$notFirst) echo ',';
         $notFirst=0
         ?>
         {
            fileName:"<?php echo $f->getFileName()?>",
            fullFilePath:"<?php echo $f->getRelativePath()?>",
            duration:<?php echo intval($imgInfo['duration'])?>,
            fadeDuration:<?php echo intval($imgInfo['fadeDuration'])?>,      
            url:"<?php echo $imgInfo['url']?>",
            groupSet:<?php echo intval($imgInfo['groupSet'])?>,
            imgHeight:<?php echo intval($imgInfo['imgHeight'])?>
         }
      <?php  }
      } ?>
   ]
}
$(function(){ccmSlideShowHelper<?php echo intval($bID)?>.init();}); 
//]]>
</script>
 
<div id="ccm-SlideshowBlock-display<?php echo intval($bID)?>" class="ccm-SlideshowBlock-display">
<div id="ccm-SlideshowBlock-heightSetter<?php echo intval($bID)?>" class="ccm-SlideshowBlock-heightSetter"></div>
<div class="ccm-SlideshowBlock-clear" ></div>
</div>

primeone replied on Feb 15, 2013 at 9:40 am Permalink Reply

Hi!

I have been looking at a solution for this, and this works!

However, it feels almost animated when the image renders. Do you know why that is?

sk01 replied on Feb 15, 2013 at 10:01 am Permalink Reply

that's because it is animated. ;)

change the "500" to a lower value to speed up the animation:
$('#slideImgWrap0').parent().animate({height:imageHeight, queue: false},500);
or use another jQuery option to change it.

primeone replied on Feb 28, 2013 at 11:04 am Permalink Reply

Ok, that would explain a lot! Lol

But I can´t turn it of because I don´t know how. I just want it without the animation. Like it´s just loading like the normal slideshow. Is that difficult to change?

sk01 replied on Feb 28, 2013 at 12:19 pm Permalink Reply

quick & dirty solution:

<?php  defined('C5_EXECUTE') or die("Access Denied."); ?>
<script type="text/javascript">
//<![CDATA[
var ccmSlideShowHelper<?php echo intval($bID)?> = {
   bID:<?php echo intval($bID)?>,
   imgNum:0,
   init:function(){
      this.displayWrap=$('#ccm-SlideshowBlock-display'+this.bID); 
      $('#ccm-SlideshowBlock-display'+this.bID).css('overflow','hidden');
      if(this.imgInfos.length==0){
         return false;
      }
      var maxHeight=0;
      for(var i=0;i<this.imgInfos.length;i++){
         this.addImg(i);

Viewing 15 lines of 92 lines. View entire code block.

 
<?php  defined('C5_EXECUTE') or die("Access Denied."); ?>
 
<script type="text/javascript">
//<![CDATA[
var ccmSlideShowHelper<?php echo intval($bID)?> = {
 
   bID:<?php echo intval($bID)?>,
   imgNum:0,
 
   init:function(){
      this.displayWrap=$('#ccm-SlideshowBlock-display'+this.bID); 
      $('#ccm-SlideshowBlock-display'+this.bID).css('overflow','hidden');
      if(this.imgInfos.length==0){
         return false;
      }
      var maxHeight=0;
      for(var i=0;i<this.imgInfos.length;i++){
         this.addImg(i);
         if(maxHeight==0 || this.imgInfos[i].imgHeight > maxHeight)
            maxHeight=this.imgInfos[i].imgHeight;
      }
      //this.displayWrap.css('height',maxHeight);
 
      $('#slideImgWrap0').css('display','block');
      $('#slideImgWrap0').children(':first').load(function() {
           var imageHeight = $(this).height(); 
           $('#slideImgWrap0').parent().css({height:imageHeight});
       });
 
      this.nextImg();
   }, 
   nextImg:function(){
      if(this.imgNum>=this.imgInfos.length) this.imgNum=0;  
      this.imgEls[this.imgNum].css('opacity',0);
      var newheight = $('#slideImgWrap'+this.imgNum).height();
      this.imgEls[this.imgNum].css('display','block');
      this.imgEls[this.imgNum].animate({opacity:1, queue: false},
         this.imgInfos[this.imgNum].fadeDuration*1000,'',function(){ccmSlideShowHelper<?php echo intval($bID)?>.preparefadeOut();});
      var prevNum=this.imgNum-1;
      if(prevNum<0) prevNum=this.imgInfos.length-1;
      if(this.imgInfos.length==1) return;
      this.imgEls[prevNum].animate({opacity:0},this.imgInfos[this.imgNum].fadeDuration*800,function(){this.style.zIndex=1;});
      $('#ccm-SlideshowBlock-display'+this.bID).css({height:newheight});
   },
   preparefadeOut:function(){
      if(this.imgInfos.length==1) return;
      var milisecDuration=parseInt(this.imgInfos[this.imgNum].duration)*1000;
      this.imgEls[this.imgNum].css('z-index',2);
      setTimeout('ccmSlideShowHelper'+<?php echo intval($bID)?>+'.nextImg();',milisecDuration);
      this.imgNum++;
   },
   maxHeight:0,
   imgEls:[],
   addImg:function(num){
      var el=document.createElement('div');
      el.id="slideImgWrap"+num;
      el.className="slideImgWrap"; 
      if(this.imgInfos[num].fullFilePath.length>0)
          imgURL=this.imgInfos[num].fullFilePath;
      else imgURL='<?php echo REL_DIR_FILES_UPLOADED?>/'+this.imgInfos[num].fileName; 
      el.innerHTML='<img src="'+imgURL+'" >';
      //el.innerHTML='<div style="height:'+this.imgInfos[num].imgHeight+'px; background:url(\''+escape(imgURL)+'\') center no-repeat"> </div>';
 
      el.style.display='none';
      this.displayWrap.append(el);
      var jqEl=$(el);
      this.imgEls.push(jqEl);
   },
 
   imgInfos:[
   <?php  
   $notFirst=1;
   foreach($images as $imgInfo) {
      $f = File::getByID($imgInfo['fID']);
      $fp = new Permissions($f);
      if ($fp->canRead()) {
         if(!$notFirst) echo ',';
         $notFirst=0
         ?>
         {
            fileName:"<?php echo $f->getFileName()?>",
            fullFilePath:"<?php echo $f->getRelativePath()?>",
            duration:<?php echo intval($imgInfo['duration'])?>,
            fadeDuration:<?php echo intval($imgInfo['fadeDuration'])?>,      
            url:"<?php echo $imgInfo['url']?>",
            groupSet:<?php echo intval($imgInfo['groupSet'])?>,
            imgHeight:<?php echo intval($imgInfo['imgHeight'])?>
         }
      <?php  }
      } ?>
   ]
}
$(function(){ccmSlideShowHelper<?php echo intval($bID)?>.init();}); 
//]]>
</script>
 
<div id="ccm-SlideshowBlock-display<?php echo intval($bID)?>" class="ccm-SlideshowBlock-display">
<div id="ccm-SlideshowBlock-heightSetter<?php echo intval($bID)?>" class="ccm-SlideshowBlock-heightSetter"></div>
<div class="ccm-SlideshowBlock-clear" ></div>
</div>

ripvanwinkle replied on Oct 21, 2013 at 5:41 pm Permalink Reply

Works. MANY thanks.

ppisoban replied on Jan 20, 2014 at 11:28 am Permalink Reply

This worked so well, the only solution I found to the slideshow/responsive tricky problem. The only thing I would add is, don't forget to clear the cache! Mine didn't work till I did that and I wasted a bit of time trying to find another solution. Thanks very much.

sk01 replied on Jan 20, 2014 at 12:59 pm Permalink Reply

you're welcome. just mark the discussion as helpful to get me some karma-points. ;)

ppisoban replied on Jan 21, 2014 at 4:36 am Permalink Reply

Already done! Great work!

cnrx replied on Oct 29, 2015 at 7:42 am Permalink Reply

Excellent solution sk01! Thank you for sharing this!

Forums

Developing (v7+)

Slideshow with responsive Themes and/or different picture heights

Code

Post Reply

Delete Post

Mark Post as Spam

Destroy Spammer

Sign In?