CODEWITHSUNDEEP
jqueryresponsive-design
GIJoeCodes
GIJoeCodes

Reputation: 1850

Loading CloudZoom on Window Size Change

I'm creating a responsive site and I'm using cloud zoom v1.0.3 which is the last free version I know of which I have access to.

In order to display the cloud zoom, all that is needed is to make reference to the javascript file and add the options embedded into the image as in:

<a href="http://kmage.net/js/cloud-zoom/example/pic01_big.jpg" id="zoom01" class="cloud-zoom" rel="position:'right', adjustX:20, adjustY:-3, tint:'#FFFFFF', softFocus:1, smoothMove:5, tintOpacity:0.8">
<img src="http://kmage.net/js/cloud-zoom/example/pic01.jpg" / width="300" height="400">

My problem is that I need to change the position from right to inside on windows that are smaller (in my scenario) than 768px.

To accomplish most of my responsive delivery loading, I have the following function:

$(function() {
checkBrowserSize ();
setInterval('checkBrowserSize ()' , 0);
});

var windowSize = '';
var actualSize = 0;
var newWindowSize = 0;

function checkBrowserSize () {

windowWidth = window.outerWidth;
var contentWidth = $('body').width();
var sizeDiff = windowWidth - contentWidth;
actualSize = windowWidth - sizeDiff;

if (actualSize > 1200) { newWindowSize = 'lg'; }
if (actualSize <= 1199 && actualSize > 991) { newWindowSize = 'md'; }
if (actualSize <= 991 && actualSize > 767) { newWindowSize = 'sm'; }
if (actualSize <= 767) { newWindowSize = 'xs'; }

if (windowSize != newWindowSize) {
    windowSize = newWindowSize;
    loadCloudZoom();
} else {
}
}

With the function above, I'm able to load certain functions depending on the width of the browser window. Normally what I do is have an if statement for the window size and load the function only if there is a size change. Every other function I have created to load either tabs, collapsible, menus work but not the case with cloudzoom.

I removed the options from the img tag. The function I have to load cloudzoom is at follows:

function loadCloudZoom() {
if (windowSize == 'xs') {
    $('.cloud-zoom').attr('rel','position:\'inside\', showTitle:false, adjustX:0, adjustY:0').CloudZoom();
} else {
    $('.cloud-zoom').attr('rel','position:\'zoomWindow\', showTitle:false, adjustX:0, adjustY:0').CloudZoom();
}
}

When loading the page on a device with a screen smaller than 768px, the cloudzoom loads inside the image and for wider screens, the cloudzoom loads on the right which is fine but what what I really want, is to display it as such without reloading the page, for the cloudzoom position to change when a change on browser size is detected.

If anybody have any suggestions, I'm all ears... thanks!

Upvotes: 2

Views: 2044

Answers (2)

Uğur Taşdildiren
Uğur Taşdildiren

Reputation: 418

easy and clean:

@media (max-width: 768px){
    .cloud-zoom-big { display: none!important;} /* disable cloud zoom */
}

Upvotes: 3

GIJoeCodes
GIJoeCodes

Reputation: 1850

NVM. Got it. When cloudZoom loads, it loads a new div with a class of mousetrap. I just had to remove it with $('.mousetrap').remove() before loading cloudzoom.

Upvotes: 0

Related Questions