Joomla Templates Club 406,261 posts

[brookscanavesi Friend brookscanavesiJoin date: April 2012Posts: 3Downloads:0Uploads:0]

#176509

I would like to have a rotator on the home page of my PURESITE template in the Slider Position of the template, however when the browser scales to a tablet or phone, I want the rotator to either scale or drop off the page.

Does anyone know how this can be accomplished? Is it module suffix or type of rotator.

I am currently using Simple Spotlight Module as my rotator:
http://www.pixelpointcreative.com/downloads/viewcategory/41-simple-spotlight.html
The module is set to 880 px width and 425 px height, which I think is causing it stay at those dimensions and not scale w/ the browser width, hence rending my site NOT RESPONSIVE.

Any help is much appreciated.

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#450499

I saw Simple Spotlight Module isn’t responsive slideshow module, so you should replace it by the responsive slideshow module.

I hope it helps!

[brookscanavesi Friend brookscanavesiJoin date: April 2012Posts: 3Downloads:0Uploads:0]

#450578

What is the Responsive Slideshow Module and where did you find it?

I hacked the supersized background module and got it work, but would be interested in another solution like this Responsive Slideshow Module.

Here is what I did to get Supersized to work:
1) Downloaded the supersized background module for joomla from: http://joomlacode.org/gf/project/supersized3/frs/?action=FrsReleaseView&release_id=16386

2) Updated the position to relative to keep it in module and out of the background in supersized.css in /modules/mod_supersized/assets/css/
to read:
#supersize {position:relative; min-height:100%; min-width:100%; top:0; left:0; z-index: -9999;}

3) then made lines of code around line 147 to 181 in /modules/mod_supersized/assets/js/supersized.js read like this:

//Gather browser and current image size
var imagewidth = $j(this).width();
var imageheight = $j(this).height();
var browserwidth = $j(window).width();
var browserheight = $j(window).height();
var offset;

var jwrw = Math.min(browserwidth,910)/910;
var jwrh = Math.min(browserheight,470)/470;
//console.log(“jwrh=” + jwrh + “, jwrw=” + jwrw + “, imagewidth=” + imagewidth + “, imageheight= ” + imageheight + “, browserwidth=” + browserwidth);
$j(this).height(550 * jwrw * ratio );
//$j(this).height(425 * jwrh );
$j(this).width(800 * jwrw);
return false;

//Resize image to proper ratio
if ((browserheight/browserwidth) > ratio){
$j(this).height(imageheight * jwr );
$j(this).width(imageheight * jwr / ratio);
$j(this).children().height(browserheight);
$j(this).children().width(browserheight / ratio);
} else {
$j(this).width(browserwidth);
$j(this).height(browserwidth * ratio);
$j(this).children().width(browserwidth);
$j(this).children().height(browserwidth * ratio);
}
if (options.vertical_center == 1){
$j(this).children().css(‘left’, (browserwidth – $j(this).width())/2);
$j(this).children().css(‘top’, (browserheight – $j(this).height())/2);
}
return false;
});
};

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#451174

I found the Responsive slideshow in here http://responsive-slides.viljamis.com/

However you have to convert it to joomla module.

[Author]

Posts