Scripts différents si version mobile

Bonjour à tous,

J'ai une petite question.

Je veux utiliser une galerie photo lightbox lorsque mon site est sur écran "normal", et j'aimerais bien utiliser la galerie pour mobile photoswipe lorsque l'on passe sur un écran smartphone.

J'ai utilisé ce bout de code :

	<script type="text/javascript">
	    // media query event handler  
    if (matchMedia) {  
        var mq = window.matchMedia("(max-width: 480px)");  
        mq.addListener(WidthChange);  
        WidthChange(mq);  
    }  
    // media query change  
    function WidthChange(mq) {  
        if (mq.matches) {  
            document.addEventListener('DOMContentLoaded', function(){
   var myPhotoSwipe = Code.PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), { enableMouseWheel: false , enableKeyboard: false });
}, false);

        }  
        else {  
            $(document).ready(function() {
			/*
			*   Examples - images
			*/

			$("a#example1").fancybox();

			$("a#example2").fancybox({
				'overlayShow'	: false,
				'transitionIn'	: 'elastic',
				'transitionOut'	: 'elastic'
			});

			$("a#example3").fancybox({
				'transitionIn'	: 'none',
				'transitionOut'	: 'none'	
			});

			$("a#example4").fancybox({
				'opacity'		: true,
				'overlayShow'	: false,
				'transitionIn'	: 'elastic',
				'transitionOut'	: 'none'
			});

			$("a#example5").fancybox();

			$("a#example6").fancybox({
				'titlePosition'		: 'outside',
				'overlayColor'		: '#000',
				'overlayOpacity'	: 0.9
			});

			$("a#example7").fancybox({
				'titlePosition'	: 'inside'
			});

			$("a#example8").fancybox({
				'titlePosition'	: 'over'
			});

			$("a[rel=example_group]").fancybox({
				'transitionIn'		: 'none',
				'transitionOut'		: 'none',
				'titlePosition' 	: 'over',
				'titleFormat'		: function(title, currentArray, currentIndex, currentOpts) {
					return '<span id="fancybox-title-over">Copyright photo : Soquay Sébastien</span>';
				}
			});

			/*
			*   Examples - various
			*/

			$("#various1").fancybox({
				'titlePosition'		: 'inside',
				'transitionIn'		: 'none',
				'transitionOut'		: 'none'
			});

			$("#various2").fancybox();

			$("#various3").fancybox({
				'width'				: '75%',
				'height'			: '75%',
				'autoScale'			: false,
				'transitionIn'		: 'none',
				'transitionOut'		: 'none',
				'type'				: 'iframe'
			});

			$("#various4").fancybox({
				'padding'			: 0,
				'autoScale'			: false,
				'transitionIn'		: 'none',
				'transitionOut'		: 'none'
			});
		});
		
        }  
    }  	
	</script>

Or, cela fonctionne bien lorsque je redimensionne ma fenetre en petit, mais sur smartphone, cela me fait simplement un lien vers l'image.

Il doit me manquer quelque chose, mais je sèche

Je n'arrive toujours pas à trouver une réponse à cette question, personne n'aurait une idée svp ?

Salut,

C'est à l'événement onresize qu'il faut associer le code (voir cet article sur la méthode matchMedia).

Merci beaucoup pour ta réponse.
Je t'avoues que niveau script je galère encore un peu. Dans mon code, il suffit d'ajouter simplement l'événement onresize ? Ou je dois le refaire ?

EDIT : En fait je vais repartir de l'exemple que tu m'as envoyé pour tester. Merci
Modifié par dapidu (06 Feb 2013 - 23:09)