Galerie pleine largeur dans jQuery

J'ai une galerie jQuery dans ma page, et je veux faire toute la largeur à toutes les résolutions et les écrans.Galerie pleine largeur dans jQuery

The page

jQuery:

$('#grid1').dynamicGallery({ 
        src : 'gallery.xml', 
        height : 400, 
        width : 1350, 
        cols : 5, 
        min_rows : 1, 
        max_rows : 2, 
        random_heights : false, 
        padding: 1, 
        interval : 2000, 
        speed : 1000, 
        easing : 'easeOutQuad', 
        scale_images : true, 
        center_images : true, 
        click_action : 'lightbox', 
        show_title_in_lightbox : true 
       });

J'ai essayé de lui donner une plus grande largeur que vous pouvez voir, mais sa va vers la droite de la page, lorsque le centrage de la div avec css-il encore apparaît différemment sur les autres écrans.

Source

2013-01-21 TonalDev

'.shell' a une largeur de 800px et une marge: 0 auto; faire cela 100% – Andy

Mise à jour:

Deux problèmes.

Je ne ai jamais défini viewportwidth et viewportheight. Je dois faire ça.
Vous n'avez pas besoin d'une fonction. Définissez simplement les deux variables et placez le code sans la fonction dans la section <head> de la page. Ensuite, bien sûr, retirez le <body onload="resize()"> et mettez simplement <body>.

Terminé. Le code final ressemble à ceci:

<!DOCTYPE html> 
<html lang="en" class="no-js"> 
<head> 
    <meta charset="UTF-8" /> 

    <title>Dynamic Grid</title> 

    <meta name="description" content="" /> 
    <meta name="keywords" value="" /> 

    <link rel="stylesheet" href="http://www.tranceil.co.il/comp/css/layout.css" type="text/css" /> 
    <link rel="stylesheet" href="http://www.tranceil.co.il/comp/css/dynamic.grid.css" type="text/css" /> 
    <style> 
     .shell > div { 
      margin: 0px; 
     } 
    </style> 
</head> 
<body> 
    <div class="shell" style="width: 100%; margin: 0 auto;"> 
     <div id="grid1"></div> 
    </div> 

    <script src="http://www.tranceil.co.il/comp/js/jquery.min.js"></script> 
    <script src="http://www.tranceil.co.il/comp/js/dynamic.grid.gallery.js"></script> 



    <script> 
     var viewportwidth; 
    var viewportheight; 

    // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight 

if (typeof window.innerWidth != 'undefined') { 
    viewportwidth = window.innerWidth, 
    viewportheight = window.innerHeight 
} 

// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document) 

else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) { 
    viewportwidth = document.documentElement.clientWidth, 
    viewportheight = document.documentElement.clientHeight 
} 

// older versions of IE 

else { 
    viewportwidth = document.getElementsByTagName('body')[0].clientWidth, 
    viewportheight = document.getElementsByTagName('body')[0].clientHeight 
} 

     (function($, undefined) { 
      $(document).ready(function() { 

       $('#grid1').dynamicGallery({ 
        src : 'http://www.tranceil.co.il/comp/gallery.xml', 
        height : viewportheight, 
        width : viewportwidth, 
        cols : 5, 
        min_rows : 1, 
        max_rows : 2, 
        random_heights : false, 
        padding: 1, 
        interval : 2000, 
        speed : 1000, 
        easing : 'easeOutQuad', 
        scale_images : true, 
        center_images : true, 
        click_action : 'lightbox', 
        show_title_in_lightbox : true 
       }); 

       $('#grid2').dynamicGallery({ 
        src : 'http://www.tranceil.co.il/comp/gallery.xml', 
        height : 400, 
        width : 1350, 
        cols : 5, 
        min_rows : 1, 
        max_rows : 4, 
        random_heights : false, 


      padding: 1, 
       interval : 2000, 
       speed : 1000, 
       easing : 'easeOutQuad', 
       scale_images : true, 
       center_images : true, 
       click_action : 'lightbox', 
       show_title_in_lightbox : true 
      }); 


     }); 
    })(jQuery); 
</script>

Original Post:

avons pas testé ce code spécifiquement pour votre situation, mais je pense que cela devrait fonctionner.

function resize() { 
    // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight 

if (typeof window.innerWidth != 'undefined') { 
    viewportwidth = window.innerWidth, 
    viewportheight = window.innerHeight 
} 

// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document) 

else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) { 
    viewportwidth = document.documentElement.clientWidth, 
    viewportheight = document.documentElement.clientHeight 
} 

// older versions of IE 

else { 
    viewportwidth = document.getElementsByTagName('body')[0].clientWidth, 
    viewportheight = document.getElementsByTagName('body')[0].clientHeight 
} 

}

Cette fonction permet d'obtenir la hauteur et la largeur du navigateur. Remplacez votre étiquette <body> avec

<body onload="resize()">

Alors, pour votre galerie:

$('#grid1').dynamicGallery({ 
        src : 'gallery.xml', 
        height : viewportheight, 
        width : viewportwidth, 
        cols : 5, 
        min_rows : 1, 
        max_rows : 2, 
        random_heights : false, 
        padding: 1, 
        interval : 2000, 
        speed : 1000, 
        easing : 'easeOutQuad', 
        scale_images : true, 
        center_images : true, 
        click_action : 'lightbox', 
        show_title_in_lightbox : true 
       });

Cela devrait régler la hauteur de la galerie et la largeur d'être la même que la fenêtre, comblant ainsi jusqu'à 100% de l'écran.

Testez-le et laissez-moi savoir si vous avez des problèmes.

Source

2013-01-21 17:12:49 Charles

Hey mon pote, merci pour le code .. je reçois Uncaught ReferenceError: viewportheight n'est pas défini .. je devine que je n'ai pas mis cela au bon endroit? – TonalDev

Je regarde votre code source et il semble que vous mettez la fonction au bon endroit ... essayez de mettre une alerte dans la fonction '$ (document) .ready' pour voir si vous obtenez des valeurs pour' viewportheight 'et' viewportwidth'. – Charles

Un "bonjour" d'alerte fonctionne pour le code de la galerie, mais pas le vôtre ... dois-je mettre $ (document) .ready dans le haut de votre script? – TonalDev

Galerie pleine largeur dans jQuery

Répondre

Questions connexes