perfidus wrote:
>
> I just wonder where exactly in the cycle.plugin code should I place the
> conditional:
> if($(window).heigth() > $(img).heigth())
> {
> //RESIZE THE PIC PROPORTIONALLY ETC...
> }
>
To resize resize images which are being displayed with jquery cycle to full
browser width:
//establish global variables
var matchedWidth;
var matchedHeight;
//check browser aspect ratio against window aspect ratio
$.fn.resizeForBack = function() {
imgWidth = $(this).width();
imgHeight = $(this).height();
winWidth = $(window).width();
winHeight = $(window).height();
imgRatio = imgWidth / imgHeight;
winRatio = winWidth / winHeight;
if(imgRatio > winRatio){
matchedHeight = winHeight;
matchedWidth = winHeight*imgRatio;
$(this).css({height: '100%', width: 'auto'});
}
else if(winRatio > imgRatio){
matchedHeight = winWidth/imgRatio;
matchedWidth = winWidth;
$(this).css({width: '100%', height: 'auto'});
}
}
function onBefore(){
$(this).resizeForBack();
$(this).parent().find('img.current-slide').removeClass('current-slide');
}
function onAfter(){
$(this).addClass('current-slide');
}
//resize visible image on window resize
$(window).resize(function(event){
$('img.current-slide').resizeForBack();
});
//use a custom transition effect which doesn't constrain the images to their
original size
$('#main-back').cycle({
fx: 'custom',
speed: 1000,
timeout: 20000,
containerResize: 0,
next: '#next-nav-home, #over-prev',
prev: '#prev-nav-home, #over',
before: onBefore,
after: onAfter,
cssBefore: {
left: 0,
top: 0,
width: matchedWidth,
height: matchedHeight,
opacity: 0.5,
zIndex: 1
},
animOut: {
opacity: 0,
},
animIn: {
left: 0,
top: 0,
opacity: 1,
width: matchedWidth+1, //animIn seems to
require a value differing
from cssBefore
height: matchedHeight+1
},
cssAfter: {
zIndex: 0
}
});
I haven't been able to find a more concise method, but this works and runs
fairly smoothly.
--
View this message in context:
http://old.nabble.com/Cycle-plugin%3A-Fill-browser-heigth-and-width-with-images-tp24729038s27240p27609687.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
