Jump to content
Sign in to follow this  
13pixels

jquery append et slim box-->incompatible?

Recommended Posts

Allez, je rentre direct dans le vif du sujet.

Je suis en train de mettre une touche finale à mon site avant d'y ajouter son contenu.

J'utilise Wordpress comme moteur, jQuery comme bibliothèque JavaScript et slimbox2 comme script d'affichage pour mes images.

Le problème est dans mon portfolio de projets. J'utilise un script qui me permet d'afficher mes travaux grâce à un accordéon un peut améliorer.Celui-ci fonctionne bien, mais c'est le contenu qui déconne.

En fait, j'affiche 3 images cliquables par ligne. Le clic sur une de ces images me permet d'afficher le contenu de l'article en dessous de ces 3 images. Pour faire çà, je clone le contenu de l'article caché dans la div qui suit juste après les 3 images. Le contenu apparaît bien mis en page, mais le "slimbox" de ces images ne fonctionne pas et ouvre l'image dans une nouvelle page.

Par contre quand je "décache" le contenu de l'article (pas le clone mais l'original) et que je clic sur l'image, çà fonctionne.

Quelqu'un aurait une piste svp? Merci d'avance.

Le lien vers la page en question:

--> ici <--

Share this post


Link to post
Share on other sites

Bonjour,

Oui, je pense savoir ce qui ne va pas, à vue de nez, avec ton explication. En fait, les fonctions jquery de base ($('#machin').click() par exemple) ne fonctionnent que sur les projets qui ont été créés en HTML dur !

Si tu crées un objet en javascript, cette fonction n'aura aucun impact sur lui...

Pour faire en sorte que ça marche, il faut utiliser la fonction live() de jquery, qui marche comme ceci :


$('#machin').live('click', function(){...});

J'espère que ça pourra te faire avancer. N'hésite pas à aller voir l'API de live sur le site officiel. ;)

Share this post


Link to post
Share on other sites

Ok, merci. Au moins, maintenant je sais ce qui déconnait. Je vais devoir trifouiller dans le code de slimbox pour faire en sorte que çà fonctionne avec "live". Je mettrais les modifs si je trouve le moyen d'y arriver tout seul. :smartass:

Share this post


Link to post
Share on other sites

La, du coup, je suis un peut perdu. Je croyais que je devais utiliser "live". La solution d'AlsaCréation n'a pas l'air de fonctionner pour pour moi. Je l'ai peut-être mal mise. Je dois avouer que j'ai pas tout compris...

Share this post


Link to post
Share on other sites

Disons que je rajoutais de l'eau au moulin. Le mieux est effectivement d'utiliser live, avec l'événement "click", et de pouvoir faire en sorte que le slimbox se lance quand on clique sur l'élément. Mais je ne connais pas le code slimbox, donc je ne sais pas comment on peut le lancer...

Après, je te montrais le forum d'Alsa pour information, une autre piste à fouiller si jamais la solution avec le live ne marchait pas. Apparemment, quand l'état du DOM change, il relance une fonction qui applique lightbox à toutes les images concernées.

Share this post


Link to post
Share on other sites

T'inquiètes Sarc, j'ai pris ton message comme une nouvelle piste et c'est clair que çà m'aide à avancer. Je me sens juste un peut frustré qu'une chose pareil soit si compliqué à réaliser.

Je vais mettre le code qui me permet de gérer mon accordéon.

/*  Portfolio Scripts
Grafikart, www.grafikart.fr */
$(document).ready(function(){
var portfolioCourant = null;

$(".work").click(function(){
portfolio.show($(this));
return false;
});
});
var portfolio = {
courant : null,
clicked : null,
show : function(clicked){
portfolio.clicked = clicked;
if(this.courant!=null && this.courant.text() == clicked.next(".detail").text()){
this.courant.slideUp(500,function(){
portfolio.courant.remove();
portfolio.courant=null;
});
return false;
}
if(this.courant!=null){
this.courant.slideUp(500,function(){
portfolio.courant.remove();
portfolio.courant=null;
portfolio.show(portfolio.clicked);
return false;
});
return false;
}
clicked.nextAll(".Space:first").append('<div class="detail">'+clicked.next(".detail").html()+'</div>');
var clone = clicked.nextAll(".Space:first").find(".detail");
this.courant=clone;

clone.css({
visibility: "visible",
height: "auto",
}).hide().slideDown(500,function(){
scrollTo(clone);
});
},
hide : function(clicked){
portfolio.courant.slideUp(500,function(){
portfolio.courant.remove();
portfolio.courant=null;
scrollTo($(".work:first"));
});
}};

Je devrais rajouter le live dans ce code ou en dehors?

Merci pour ton aide en tout cas.

Share this post


Link to post
Share on other sites

En fait, ce n'est pas trop le code ton accordéon qui est important ici, mais plutôt celui qui gère le slimbox. Ton accordéon marche sans souci, et te crée le contenu que tu souhaitais, donc c'est bon. Maintenant, il faut s'assurer que le slimbox marchera partout, même sur les objets nouvellement créés.

Dans le code de ton slimbox.js, il doit sûrement y avoir "$(truc).click()" quelque part, où il met "quand on clique sur une image dont l'attribut rel est ça, alors on lance l'effet slimbox".

A la place de click, il faut mettre live('click', function{}).

J'espère que je suis compréhensible... A peu près.

Share this post


Link to post
Share on other sites

Tu es très compréhensible merci.

Pour éviter de toucher au code du 'lightbox", est-ce que c'est possible de faire un fonction dans mon fichier javascript qui automatise le live('click',function{}) sur mes images.

J'ai rajouté çà tout à la fin du fichier pour tester et çà me change bien le background:

$('a[rel=gallery]').live('click', function() {
$(".Space").css({'background-color':"red"},500);
return false;
});

De la même manière est-ce qu'il y a des chances que çà fonctionne?

Share this post


Link to post
Share on other sites

Je viens de regarder un peu le code de slimbox, que je ne connaissais pas.

En effet, c'est du côté de l'AUTOLOAD CODE BLOCK qu'il faut modifier des choses. Eux, ils donnent ça :

// AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED)
if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
jQuery(function($) {
$("a[rel^='lightbox']").slimbox({/* Put custom options here */}, null, function(el) {
return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
});
});
}

Essaye voir en modifiant un peu ça, et par exemple en mettant :

$("a[rel^='lightbox']").live('click', function(){
slimbox({/* Put custom options here */}, null, function(el) {
return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
});

Pas certain que ça marche en l'état, mais il faut voir...

Share this post


Link to post
Share on other sites

Merci pour ta persévérance sarc mais j'ai essayé sur l'exemple fourni avec le plugin et çà fonctionne pas. C'est vraiment bizarre ce truc...

Share this post


Link to post
Share on other sites

C'est pas bizarre, c'est juste que le web francophone manque énormément de ressources en jquery, et que donc, soit on cherche sur l'anglophone, soit on se dépatouille.

Bref, en fait, c'était tout bête : une fois que tu as fait ton append, il suffit que tu relances un coup de :

$("a[rel^='lightbox']").slimbox({/* Put custom options here */}, null, function(el) {
return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));});

Comme ça, ça remet un slimbox sur tous les objets qui existent après ton append, et donc, ta nouvelle image sera concernée...

Enfin, tu changes lightbox par gallery, si j'ai bien fait gaffe à ton code, bien entendu.

J'ai fait un test rapidement sur l'exemple de base, et ça marche comme il faut.

Bonne chance, et excuse-moi d'avoir tourné autour du pot (et de la solution).

Share this post


Link to post
Share on other sites

:!: :):thumbsup::) :!:

T'assures, c'est tout bon. Tu peux te dire que tu as passé une journée à aider quelqu'un qui te revaudra çà pendant un bon bout de temps. Ca fonctionne comme sur des roulettes. Grand merci.

Je mets le code pour tout le monde, on sait jamais.

/*  Portfolio Scripts
Grafikart, www.grafikart.fr */
$(document).ready(function(){
var portfolioCourant = null;

$(".work").click(function(){
portfolio.show($(this));
return false;
});
});
var portfolio = {
courant : null,
clicked : null,
show : function(clicked){
portfolio.clicked = clicked;
if(this.courant!=null && this.courant.text() == clicked.next(".detail").text()){
this.courant.slideUp(500,function(){
portfolio.courant.remove();
portfolio.courant=null;
});
return false;
}
if(this.courant!=null){
this.courant.slideUp(500,function(){
portfolio.courant.remove();
portfolio.courant=null;
portfolio.show(portfolio.clicked);
return false;
});
return false;
}
clicked.nextAll(".Space:first").append('<div class="detail">'+clicked.next(".detail").html()+'</div>');

var clone = clicked.nextAll(".Space:first").find(".detail");
this.courant=clone;
clone.css({
visibility: "visible",
height: "auto",
})

.hide().slideDown(500,function(){
scrollTo(clone);
});






//réinitialise le slimbox après l'ajout de code html via le code ci-dessus pour que le nouveau code soit pris en compte

$("a[rel^='lightbox']").slimbox({/* Put custom options here */}, null, function(el) {
return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));});






},


hide : function(clicked){
portfolio.courant.slideUp(500,function(){
portfolio.courant.remove();
portfolio.courant=null;
scrollTo($(".work:first"));
});
}};

J'ai beaucoup appris grâce à toi.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Similar Content

    • By kevinjoseph
      Bonjour, j’ai un gros problème sur mon site Wordpress . Du jour au lendemain, mon site wordpress fais une redirection vers un autre site wordpress que j’ai crée ,sans que je touche à quoi que ce soit. Quand j’essai d’aller sur l’admin pour désactiver les plugins et voir d’où peut venir le problème. Impossible d’accéder, sa me redirige vers l’admin de l’autre site. Au final il est impossible que j’accède au site via (google, la bare de recherche, les favoris, l’admin…) pour voir ce qu’il fonction pas, j’ai juste accès au FTP. J'ai essayé de voir d'où pouvez venir ce bug en supprimant les plugins, le théme, mes derniers modifications, regarder sur le .htaccess si il y avais quelque par le nom de domaine de l'autre site écrit. Ca n'a rien changer, le site continue de ce rediriger automatiquement vers l'autre site. Si vous avez une idée d’où sa peut venir ou comment faire pour arranger ça et surtout comment éviter que sa ce reproduise. Sa m’aiderai beaucoup, merci d’avance.
      voici le code du .htaccess:
       
      # BEGIN WordPress
      <IfModule mod_rewrite.c>
      RewriteEngine On
      RewriteBase /
      RewriteRule ^index\.php$ - [L]
      RewriteCond %{REQUEST_FILENAME} !-f
      RewriteCond %{REQUEST_FILENAME} !-d
      RewriteRule . /index.php [L]
      </IfModule>

      # END WordPress
      ~   Ludovic • 16:28    
    • By prem
      Hello j'aurais besoin urgemment de votre aide svp... Cela fais des jours que je bloques.
      Voilà j'ai des posts , chaque posts a plusieurs categories.
      j'ai fais une requete wp_query pour lister tous les posts sauf une categorie ,mais je me retrouves avec des doublons . voila mon code 
      <?php /** * The template for displaying a grid item. * * @package WordPress * @subpackage Edition * @since Edition 1.0 */ $do_not_duplicate = array(); $query = new WP_Query( array( 'category__not_in' => array( 32 ) ) ); if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); $do_not_duplicate[] = $post->ID; global $tw_section, // section object $grid_size, // grid size $post; // section object $section_id = get_the_ID($post); // section id $tw_categories = get_categories(); // get all post categories $post_type = get_post_type(); $thumbnail_size = 'half'; $thumbnail_size = ($grid_size == 'fullgrid') ? 'big' : $thumbnail_size; if ($grid_size == 'related') { $thumbnail_size = 'related'; } ?> <div class="<?php if ( isset($tw_categories[0]->term_id) ) { echo 'highlight_category_' . $tw_categories[0]->term_id; } ?> <?php echo (has_post_thumbnail()) ? 'has-thumbnail' : 'no-thumbnail'; ?> <?php echo $grid_size;?> grid-item"> <div class="isobrick-inner"> <?php the_post_thumbnail($thumbnail_size, array( 'onload' => 'jQuery(this).animate({ "opacity" : 0.75 }, 500);' )); ?> <?php echo themewich_review_circle('none', false); ?> <?php if ( 'post' == $post_type ) : ?> <span class="thumboverdate"> <i class="fa fa-bookmark"></i> <?php themewich_date('human'); ?> </span> <?php else: ?> <?php if ( function_exists( 'wc_get_template' ) ) : ?> <span class="thumboverdate"> <?php wc_get_template( 'loop/price.php' ); ?> </span> <?php endif; ?> <?php endif; ?> <div class="thumbovertext"> <div class="badge"> <?php echo ag_get_cats(3); ?> </div> <h2 class="title"> <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"> <?php $title = get_the_title(); if (strlen($title) >= 75) { $title = mb_substr($title, 0, 75) . "... "; } echo $title; ?> </a> </h2> <?php if ( 'post' == $post_type ) : ?> <?php preg_match('/<!--more(.*?)?-->/', $post->post_content, $matches); ?> <a class="button outline" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"> <?php if ( isset($matches[1]) && $matches[1] ) { echo $matches[1]; } else { _e('Lire la suite', 'themewich'); } ?> </a> <?php endif; ?> </div> <a class="brick-thumb-link" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"> <?php the_title(); ?> </a> </div> </div> <?php endwhile; ?> <?php endif; ?> <?php wp_reset_query(); ?>  
       
       
      et quand je fais un var_dump ($do_not_duplicate);
      j'obtiens 
      array(1) { [0]=> int(470) }
      array(2) { [0]=> int(470) [1]=> int(368) } 
      array(3) { [0]=> int(470) [1]=> int(368) [2]=> 
       
       
      et je souhaiterai avec l'aide d'un foreach ne poster mon article qu'une fois
    • By Theode69
      Bonjour à tous, sachez que votre réponse me sera d'une très grande aide ! 
       
      Je suis actuellement entrain de créer un  site pour une université. L'objectif est d'avoir terminé avant la fin du mois d'aout une version test/un MVP simple mais fonctionnel. Pour résumer, mon but est de simplifier et rendre plus rapide les inscriptions des étudiants auprès des professionnels. Ce site contiendra une partie pour les étudiants, une pour les professionnels.
       
      Pour faire simple chaque étudiant aura  un compte perso, sur lequel il pourra ajouter des documents (carte d'identité, RIB, justificatif de domicile, etc) afin de les stocker dans un cloud. 
       
      De l'autre côté, les professionnels (auto école, salle de sport, assurance, protection sociale, opérateur téléphonique) auront un espace dédié à leur activité. Ils auront une fiche résumant leur entreprise (secteur, téléphone, localisation) et ils renseigneront les documents nécessaire lors de l'inscription à leurs services. 
      Pour s'inscrire, l'étudiant n'aura plus qu'a autoriser l'accès à ses documents (préalablement enregistrés dans le cloud) évitant ansi de perdre du temps sur place en passant par la dématérialisation de l'inscription. 
       
      Le projet devra donc contenir : 
       
      une zone de connection privée pour chaque utilisateur et entreprise la liaison avec un cloud (je pensais sous traiter la gestion du cloud  à une entreprise spécialisée)  si possible une barre de recherche permettant de trouver les professionnels répondant aux besoins des utilisateurs  la possibilité pour le professionnel de télécharger les documents auxquels ils a été autorisé afin de procéder à l’inscription  si possible (pas urgent car surement compliqué) que chaque professionnel puisse établir une page de pré inscription où l’utilisateur remplie ses données de manières manuscrites (prénom, nom, mail, etc) avant de compléter l’inscription avec les documents justificatifs contenus dans le cloud   
       
      Ayant de bonnes bases en HTML+CSS et quelques connaissances concernant Java Script j'hésite encore sur la forme que pourra prendre le site. 
      Soit il m’est possible d’utiliser WordPress.org en utilisant différents plug ins (mais il y en a t-il qui permettent réellement de remplir tout ces objectifs?). 
      Soit je pensais créer mon site à l’aide de Meteor.Js ou Node.Js …

      Quelles solutions préconisez vous ? Si aucune ne vous semble adaptée selon vous comment pourrais je faire pour créer ce MVP ? Comment feriez vous pour commencer ce projet ? 
      Merci énormément pour l’aide que vous pourrez m’apporter dans cette aventure ! Je suis disponible si vous voulez échanger plus longuement. 
       
      Bien cdt 
      Théo R
    • By Toulonweb
      Bonjour,
      je souhaite réaliser une section annuaire sur un site tournant sous wordpress,
      j'ai eu beau chercher a droite et a gauche mais rien à part 2 plugins qui ne sont plus mis a jours depuis des années.
      Je précise que je ne souhaite pas faire un site annuaire mais seulement une section sur un site existant.
      J'ai bien tenté arffo mais il n'est plus compatible avec php 5
      Auriez vous une piste?
       
      Merci d'avance.
       
      Nicolas
    • By fbern
      Bonjour
       
      j'ai un vieux site sous wordpress, et je voudrais faire une dizaine de redirections.
      Je n'ai pas besoin d'expressions régulières, c'est du 1 pour 1.
      N'étant pas développeur, pouvez vous m'aider: dois-je obligatoirement utiliser mod rewrite ?
      Est-ce que vous n'auriez pas une solution plus simple car je n'ose pas mettre les mains dans Apache?
      merci
×
×
  • Create New...