[Wordpress/Jquery] Cent ans de solitude

Zezette
PHP Wordpress

Bonjour,

après de nombreuses recherches et tentatives infructueuses, je me résous à évoquer ici mon problème.

Je suis en train de travailler mon site en local avec wordpress et je voudrais avoir une page consacrée à une galerie d'images en utilisant zoombox.

Je ne pense pas que le problème vienne des chemins liant les images (miniatures et grand format) car lorsque je clique sur une miniature, j'accède à la grande image dans une nouvelle page. Mais de fait l'effet zoombox est absent.

Ci-dessous la fin du code dans le header:

<link rel="profile" href="http://gmpg.org/xfn/11" /> 
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" /> 
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" /> 
<!--[if lt IE 9]> 
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script> 
<![endif]--> 
<?php 
    /* We add some JavaScript to pages with the comment form 
     * to support sites with threaded comments (when in use). 
     */ 
    if ( is_singular() && get_option( 'thread_comments' ) ) 
        wp_enqueue_script( 'comment-reply' ); 

    /* Always have wp_head() just before the closing </head> 
     * tag of your theme, or you will break many plugins, which 
     * generally use this hook to add elements to <head> such 
     * as styles, scripts, and meta tags. 
     */ 
    wp_head(); 
?> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
<script type="text/javascript" src="/wordpress/wp-content/themes/unidiz/zoombox/zoombox.js"></script> 
<link href="/wordpress/wp-content/themes/unidiz/zoombox/zoombox.css" rel="stylesheet" type="text/css" media="screen" />     
</head>

et aussi le code dans la page contenant mes images (ici il n'y a qu'un lien pour ne pas surcharger le message): 

<div id="portfolio-content"> 
            <ul id="portfolio-ul"> 
                <li><a href="/wordpress/wp-content/themes/unidiz/images/portfolio/large/doodles/visual-development-concept-design-01.jpg" class="zoombox"><img src="/wordpress/wp-content/themes/unidiz/images/portfolio/thumbnails/doodles/visual-development-concept-design-01.jpg"></a></li> 
</ul> 
</div>

Mes connaissances en php sont ultra basiques. J'espère que quelqu'un saura et voudra bien m'aider à solutionner ceci.

D'avance merci.

2 réponses

Grafikart

Je ne vois nul part le script javascript avec $('.zoombox').init(); ça doit venir de ça

Zezette
Auteur

J'avais essayé plusieurs formules mais n'en avais trouvé aucune fonctionnant. Dans l'une d'elles, le code avec le script apparaissait ainsi:

<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php
    /* We add some JavaScript to pages with the comment form
     * to support sites with threaded comments (when in use).
     */
    if ( is_singular() && get_option( 'thread_comments' ) )
        wp_enqueue_script( 'comment-reply' );
    /* Always have wp_head() just before the closing </head>
     * tag of your theme, or you will break many plugins, which
     * generally use this hook to add elements to <head> such
     * as styles, scripts, and meta tags.
     */
    wp_head();
?>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="/wordpress/wp-content/themes/unidiz/zoombox/zoombox.js"></script>
<link href="/wordpress/wp-content/themes/unidiz/zoombox/zoombox.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript">
jQuery(function($){
    $('a.zoombox').zoombox();

    // You can also use specific options
    $('a.zoombox').zoombox({
        theme : 'zoombox', //available themes : zoombox,lightbox, prettyphoto, darkprettyphoto, simple
        opacity : 0.8, // Black overlay opacity
        duration : 800, // Animation duration
        animation : true, // Do we have to animate the box ?
        width : 600, // Default width
        height : 400, // Default height
        gallery : true, // Allow gallery thumb view
        autoplay : false // Autoplay for video
    });
});
</script>
</head>

Pensant, à tort ou à raison, qu'il pouvait s'agir d'un conflit de script, j'avais ensuite ajouté cette ligne de code dans le header: 

<?php wp_enqueue_script( 'zoombox' ); ?>

Mais cela n'a rien changé. La grande image continue de s'ouvrir dans une nouvelle page sans l'effet zoombox.

Une idée?...