Recharger le script jquery sur la requête média/redimensionner le navigateur

Question

Je travaille avec this curseur jquery/css3 et je voudrais le rendre réactif.

<http://jsfiddle.net/mj13/dQTS4/2/> 

Le problème avec ce curseur est qu'il utilise des tranches/masques pour afficher l'image. Au chargement de la page, le script "obtient" la taille de l'image et crée des tranches/masques basés sur cette image.

J'ai réussi à redimensionner les tranches du curseur lorsque le navigateur est redimensionné (largeur: 33%). Cependant, le problème vient quand je redimensionne l'image, car les «tranches» qui sont mises à l'échelle sont celles de l'image initialement saisies à 100%.

J'ai déjà essayé de créer des requêtes multimédia pour afficher différentes images à différentes tailles d'écran. Malheureusement, le script crée ces tranches d'image en fonction de la taille de l'écran lors du chargement de la page!

Y at-il un moyen de recharger le script jquery ou la partie de celui-ci qui crée les tranches d'image lorsque la page est redimensionnée? Je suis prêt à envisager d'autres options.

Merci d'avance!

Answer 1

Essayez d'écrire votre code dans window.resize function comme:

$(window).resize(function() { 
    // add the stuff here to execute the your slider again; 
});