Utiliser JQUERY pour les images des articles (Créer un compte)

  • Statut : non résolu
6 sujets de 1 à 6 (sur un total de 6)
  • Auteur
    Messages
  • #460242
    imported_BenKenobi
    Membre
    Padawan WordPress
    93 contributions

    Bonjour,

    Est-il possible d’utiliser simplement le JQUERY disponible par défaut dans WordPress 2.5.1 pour faire l’effet Lightbox sur les images des articles que l’on affiche en vignettes ?

    En effet, cette librairie est disponible pour l’admin mais peut-on s’en servir aussi côté public… sans trop de bidouille si-possible… :D

    #633252
    dlo
    Participant
    Maître WordPress
    1850 contributions

    En utilisant jQuery et la fonction ImageBox de Interface (plugin pour jQuery également fourni en standard avec WordPress), on peut tout à fait obtenir l’effet LightBox que tu mentionnes.

    Voir exemple d’utilisation sur le site de Interface.

    La mise en oeuvre est de plus assez simple…

    Cordialement

    #633253
    benkenobi
    Gestionnaire du forum
    Maître WordPress
    4079 contributions

    Quelles modifications puis-je faire pour parvenir à mes fins ?

    #633254
    dlo
    Participant
    Maître WordPress
    1850 contributions

    Tout d’abord, il faut charger les bibliothèques jQuery et Interface à l’appel des pages du blog ainsi que le script pour l’effet LightBox. Cela se fait en créant une fonction comme celle-ci dans le fichier functions.php du thème:

    // Load jQuery script
    function dlo_load_script() {
    wp_enqueue_script(‘interface’, false, array(‘jquery’), false);
    wp_enqueue_script(‘monLightbox’, get_bloginfo(‘template_directory’).’/js/monlightbox.js’, array(‘interface’), false);
    }
    
    add_action(‘init’, ‘dlo_load_script’);

    Ensuite il faut écrire le script jQuery monlightbox.js qui va créer l’effet LightBox et le copier dans le répertoire /js du thème:

    jQuery.noConflict();
    jQuery(document).ready(
    	function($)
    	{
    		$.ImageBox.init(
    			{
    				loaderSRC: ‘images/imagebox/loading.gif’,
    				closeHTML: ‘<img src="images/imagebox/close.jpg" />‘
    			}
    		);
    	});

    Enfin, il faut ajouter des clauses de style particulières dans le header.php du thème:

    
    #ImageBoxOverlay
    {
    	background-color: #000;
    }
    #ImageBoxCaption
    {
    	background-color: #F4F4EC;
    }
    #ImageBoxContainer
    {
    	width: 250px;
    	height: 250px;
    	background-color: #F4F4EC;
    }
    #ImageBoxCaptionText
    {
    	font-weight: bold;
    	padding-bottom: 5px;
    	font-size: 13px;
    	color: #000;
    }
    #ImageBoxCaptionImages
    {
    	margin: 0;
    }
    #ImageBoxNextImage
    {
    	background-image: url(images/imagebox/spacer.gif);
    	background-color: transparent;
    }
    #ImageBoxPrevImage
    {
    	background-image: url(images/imagebox/spacer.gif);
    	background-color: transparent;
    }
    #ImageBoxNextImage:hover
    {
    	background-image: url(images/imagebox/next_image.jpg);
    	background-repeat:	no-repeat;
    	background-position: right top;
    }
    #ImageBoxPrevImage:hover
    {
    	background-image: url(images/imagebox/prev_image.jpg);
    	background-repeat:	no-repeat;
    	background-position: left bottom;
    }

    Ne pas oublier de prévoir les images next_image.jpg, prev_image.jpg, close.jpg qui seront affichées avec l’image pour passer à l’image suivante ou précédente ou fermer la fenêtre.

    A partir de ce moment, toutes les images possédant un attribut rel=imagebox dans leur lien seront affichées avec un effet LightBox. L’attribut title=”xxxxxx” du lien sera utilisé comme titre de l’image affichée.
    Exemple:

    <a href="images/imagebox/bw1.jpg" title="Moon eclipse" rel="imagebox"><img src="images/imagebox/th_bw1.jpg"

    Pour avoir tous les détails, se reporter à la documentation Imagebox.

    Cordialement

    #633255
    hotfirenet
    Participant
    Initié WordPress
    11 contributions

    Dsl de faire remonter le topic mais je ne comprend pas le fonctionnement de wp_enqueue_script comment fonctionne cette fonction a quoi correspond interface ??

    merci par avance

    #633256
    nlex
    Membre
    Chevalier WordPress
    300 contributions

    wp_enqueue_script dans un script ?

    Est-ce possible de mettre la fonction wp_enqueue_script tout simplement dans le fichier Header ??

6 sujets de 1 à 6 (sur un total de 6)
  • Vous devez être connecté pour répondre à ce sujet.