jQuery onclick si alors problème conditionnel window.location.href

OK, donc j'essaie d'utiliser un chargeur d'images/galerie sympa que j'ai trouvé here appelé ShineTime.jQuery onclick si alors problème conditionnel window.location.href

Je veux l'adopter pour ressembler à une visionneuse de produit sur my homepage où vous pouvez voir l'espace vide que je lui ai réservé. Maintenant, puisque je dois l'adapter pour être une visionneuse de produit, j'aimerais avoir des liens vers des produits ou services que je suis en train de prévisualiser.

J'ai créé un conditionnel dans le code que vous pouvez voir ci-dessous que je vais souligner ici:

$('#thumb1').click(function() 
    { 
     if($('#largephoto').click()) 
     { 
     window.location.href = 'http://www.marioplanet.com/product.asp?IDnum=1'; 
     } 
     else 
     { 
     } 
    });

Comme vous pouvez le voir, je suis en train de le mettre en place à l'endroit où je clique sur le thumb1 élément, une div contenant ma première petite vignette, et si je clique ensuite sur la div largephoto, où réside ma plus grande photo de prévisualisation, alors il me faudra le lien ci-dessus. Pour une raison quelconque, cependant, lorsque je clique sur la vignette, cela ne fonctionnera pas correctement. Cela me mènera directement au lien lorsque je clique sur la vignette. Je pense que cela peut être dû à une partie du code ci-dessous jQuery, donc j'ai inclus le code complet ici:

<html> 
<head> 
<title>ShineTime at AddyOsmani.com</title> 

<link rel="stylesheet" type="text/css" href="styles.css"></link> 

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> 
<!--[if lt IE 7]> 
<script defer type="text/javascript" src="js/pngfix.js"></script> 
<![endif]--> 
</head> 

<script type="text/javascript"> 
    $(document).ready(function() 
    { 

    /*Your ShineTime Welcome Image*/ 
    var default_image = 'images/large/default.jpg'; 
    var default_caption = 'Welcome to ShineTime'; 

    /*Load The Default Image*/ 
    loadPhoto(default_image, default_caption); 


    function loadPhoto($url, $caption) 
    { 


     /*Image pre-loader*/ 
     showPreloader(); 
     var img = new Image(); 
     jQuery(img).load(function() 
     { 
      jQuery(img).hide(); 
      hidePreloader(); 

     }).attr({ "src": $url }); 

     $('#largephoto').css('background-image','url("' + $url + '")'); 
     $('#largephoto').data('caption', $caption); 
    } 


    /* When a thumbnail is clicked*/ 
    $('.thumb_container').click(function() 
    { 

      var handler = $(this).find('.large_image'); 
      var newsrc = handler.attr('src'); 
      var newcaption = handler.attr('rel'); 
      loadPhoto(newsrc, newcaption); 

    }); 

    /*When the main photo is hovered over*/ 
    $('#largephoto').hover(function() 
    { 

     var currentCaption = ($(this).data('caption')); 
     var largeCaption = $(this).find('#largecaption'); 

     largeCaption.stop(); 
     largeCaption.css('opacity','0.9'); 
     largeCaption.find('.captionContent').html(currentCaption); 
     largeCaption.fadeIn() 



     largeCaption.find('.captionShine').stop(); 
     largeCaption.find('.captionShine').css("background-position","-550px 0"); 
     largeCaption.find('.captionShine').animate({backgroundPosition: '550px 0'},700); 

     Cufon.replace('.captionContent'); 


    }, 

    function() 
    { 
     var largeCaption = $(this).find('#largecaption'); 
     largeCaption.find('.captionContent').html(''); 
     largeCaption.fadeOut(); 

    }); 



    /* When a thumbnail is hovered over*/ 
    $('.thumb_container').hover(function() 
    { 
     $(this).find(".large_thumb").stop().animate({marginLeft:-7, marginTop:-7},200); 
     $(this).find(".large_thumb_shine").stop(); 
     $(this).find(".large_thumb_shine").css("background-position","-99px 0"); 
     $(this).find(".large_thumb_shine").animate({backgroundPosition: '99px 0'},700); 

    }, function() 
    { 
     $(this).find(".large_thumb").stop().animate({marginLeft:0, marginTop:0},200); 
    }); 

    function showPreloader() 
    { 
     $('#loader').css('background-image','url("images/interface/loader.gif")'); 
    } 

    function hidePreloader() 
    { 
     $('#loader').css('background-image','url("")'); 
    } 

    $('#thumb1').click(function() 
    { 
     if($('largephoto').click()) 
     { 
     window.location.href = 'http://www.marioplanet.com/product.asp?IDnum=1'; 
     } 
     else 
     { 
     } 
    }); 

    }); 
</script> 

<div id="container"> 
<div id="containertitle"> 
Welcome to ShineTime 
</div> 
    <div class="mainframe"> 
     <div id="largephoto"> 
     <div id="loader"></div> 


     <div id="largecaption"> 
     <div class="captionShine"></div> 
      <div class="captionContent"></div> 

     </div> 

     <div id="largetrans"> 
     </div> 

     </div> 

    </div> 
    <div class="thumbnails"> 
    <br><br><br> 
    <!-- start entry--> 
        <div id="thumb1" class="thumbnailimage"> 
         <div class="thumb_container"> 
          <div class="large_thumb"> 
           <img src="images/thumbnails/stimage1.jpg" class="large_thumb_image" alt="thumb" /> 
           <img src="images/large/stimage1.jpg" class="large_image" rel="Mario (Running) - Plush" /> 
           <div class="large_thumb_border"></div> 
           <div class="large_thumb_shine"></div> 
          </div> 
         </div> 
        </div> 
     <!--end entry-->   

    <!-- start entry--> 
        <div id="thumb2" class="thumbnailimage"> 
         <div class="thumb_container"> 
          <div class="large_thumb"> 
           <img src="images/thumbnails/stimage2.jpg" class="large_thumb_image" alt="thumb" /> 
           <img src="images/large/stimage2.jpg" class="large_image" rel="Mushroom - Plush" /> 
           <div class="large_thumb_border"></div> 
           <div class="large_thumb_shine"></div> 
           </div> 
         </div> 
         </div> 
     <!--end entry-->   

    <!-- start entry--> 
        <div id="thumb3" class="thumbnailimage"> 
         <div class="thumb_container"> 
          <div class="large_thumb"> 
           <img src="images/thumbnails/stimage3.jpg" class="large_thumb_image" alt="thumb" /> 
           <img src="images/large/stimage3.jpg" class="large_image" rel="I can't see through walls, but I can still kick your ass." /> 
           <div class="large_thumb_border"></div> 
           <div class="large_thumb_shine"></div> 
           </div> 
         </div> 
         </div> 
     <!--end entry-->   

    <!-- start entry--> 
        <div id="thumb4" class="thumbnailimage"> 
         <div class="thumb_container"> 
          <div class="large_thumb"> 
           <img src="images/thumbnails/stimage4.jpg" class="large_thumb_image" alt="thumb" /> 
           <img src="images/large/stimage4.jpg" class="large_image" rel="I won't bite, I promise!" /> 
           <div class="large_thumb_border"></div> 
           <div class="large_thumb_shine"></div> 
           </div> 
         </div> 
         </div> 
     <!--end entry-->   

    <!-- start entry--> 
        <div id="thumb5" class="thumbnailimage"> 
         <div class="thumb_container"> 
          <div class="large_thumb"> 
           <img src="images/thumbnails/stimage5.jpg" class="large_thumb_image" alt="thumb" /> 
           <img src="images/large/stimage5.jpg" class="large_image" rel="Using swords to open up that ketchup bottle may not have been the best idea.." /> 
           <div class="large_thumb_border"></div> 
           <div class="large_thumb_shine"></div> 
           </div> 
         </div> 
         </div> 
     <!--end entry-->   

    <!-- start entry--> 
        <div id="thumb6" class="thumbnailimage"> 
         <div class="thumb_container"> 
          <div class="large_thumb"> 
           <img src="images/thumbnails/stimage6.jpg" class="large_thumb_image" alt="thumb" /> 
           <img src="images/large/stimage6.jpg" class="large_image" rel="We're going to..wait for it..kick your ass!" /> 
           <div class="large_thumb_border"></div> 
           <div class="large_thumb_shine"></div> 
           </div> 
         </div> 
         </div> 
     <!--end entry-->  

    <!-- start entry--> 
        <div id="thumb7" class="thumbnailimage"> 
         <div class="thumb_container"> 
          <div class="large_thumb"> 
           <img src="images/thumbnails/stimage7.jpg" class="large_thumb_image" alt="thumb" /> 
           <img src="images/large/stimage7.jpg" class="large_image" rel="I can't be invisible, but I can kick your ass." /> 
           <div class="large_thumb_border"></div> 
           <div class="large_thumb_shine"></div> 
           </div> 
         </div> 
         </div> 
     <!--end entry-->  

    <!-- start entry--> 
        <div id="thumb8" class="thumbnailimage"> 
         <div class="thumb_container"> 
          <div class="large_thumb"> 
           <img src="images/thumbnails/stimage8.jpg" class="large_thumb_image" alt="thumb" /> 
           <img src="images/large/stimage8.jpg" class="large_image" rel="Dave Lizewski is a man in a green costume. He is Kick-Ass." /> 
           <div class="large_thumb_border"></div> 
           <div class="large_thumb_shine"></div> 
           </div> 
         </div> 
         </div> 
     <!--end entry--> 

    <!-- start entry--> 
        <div id="thumb9" class="thumbnailimage"> 
         <div class="thumb_container"> 
          <div class="large_thumb"> 
           <img src="images/thumbnails/stimage9.jpg" class="large_thumb_image" alt="thumb" /> 
           <img src="images/large/stimage9.jpg" class="large_image" rel="I probably shouldn't have yelled 'surprise' wearing this costume.." /> 
           <div class="large_thumb_border"></div> 
           <div class="large_thumb_shine"></div> 
           </div> 
         </div> 
         </div> 
     <!--end entry-->   

    <!-- start entry--> 
        <div id="thumb10" class="thumbnailimage"> 
         <div class="thumb_container"> 
          <div class="large_thumb"> 
           <img src="images/thumbnails/stimage10.jpg" class="large_thumb_image" alt="thumb" /> 
           <img src="images/large/stimage10.jpg" class="large_image" rel="I can't read your mind, but I can kick your ass." /> 
           <div class="large_thumb_border"></div> 
           <div class="large_thumb_shine"></div> 
           </div> 
         </div> 
         </div> 
     <!--end entry-->  

    <!-- start entry--> 
        <div id="thumb11" class="thumbnailimage"> 
         <div class="thumb_container"> 
          <div class="large_thumb"> 
           <img src="images/thumbnails/stimage11.jpg" class="large_thumb_image" alt="thumb" /> 
           <img src="images/large/stimage11.jpg" class="large_image" rel="I love that indented text effect up there. Not bad.." /> 
           <div class="large_thumb_border"></div> 
           <div class="large_thumb_shine"></div> 
           </div> 
         </div> 
         </div> 
     <!--end entry-->   

     <!-- start entry--> 
        <div id="thumb12" class="thumbnailimage"> 
         <div class="thumb_container"> 
          <div class="large_thumb"> 
           <img src="images/thumbnails/stimage12.jpg" class="large_thumb_image" alt="thumb" /> 
           <img src="images/large/stimage12.jpg" class="large_image" rel="I got your a present. It's an Ass-Kicking." /> 
           <div class="large_thumb_border"></div> 
           <div class="large_thumb_shine"></div> 
           </div> 
         </div> 
         </div> 
     <!--end entry-->   

     <!-- start entry--> 
        <div id="thumb13" class="thumbnailimage"> 
         <div class="thumb_container"> 
          <div class="large_thumb"> 
           <img src="images/thumbnails/stimage13.jpg" class="large_thumb_image" alt="thumb" /> 
           <img src="images/large/stimage13.jpg" class="large_image" rel="You don't have to be super to be a hero." /> 
           <div class="large_thumb_border"></div> 
           <div class="large_thumb_shine"></div> 
           </div> 
         </div> 
         </div> 
     <!--end entry--> 

     <!-- start entry--> 
        <div id="thumb14" class="thumbnailimage"> 
         <div class="thumb_container"> 
          <div class="large_thumb"> 
           <img src="images/thumbnails/stimage15.jpg" class="large_thumb_image" alt="thumb" /> 
           <img src="images/large/stimage15.jpg" class="large_image" rel="We Can Kick Ass - Anytime, Anyday." /> 
           <div class="large_thumb_border"></div> 
           <div class="large_thumb_shine"></div> 
           </div> 
         </div> 
         </div> 
     <!--end entry--> 

     <!-- start entry--> 
        <div id="thumb15" class="thumbnailimage"> 
         <div class="thumb_container"> 
          <div class="large_thumb"> 
           <img src="images/thumbnails/stimage14.jpg" class="large_thumb_image" alt="thumb" /> 
           <img src="images/large/stimage14.jpg" class="large_image" rel="You know..I had this look first. Batman copied ME." /> 
           <div class="large_thumb_border"></div> 
           <div class="large_thumb_shine"></div> 
           </div> 
         </div> 
         </div> 
     <!--end entry-->  



    </div> 
</div> 


</html>

Toutes les idées?

Source

2010-10-17 Qcom

Ce code:

$('#thumb1').click(function() 
{ 
    if($('#largephoto').click()) 
    { 
     window.location.href = 'http://www.marioplanet.com/product.asp?IDnum=1'; 
    } 
});

... n'est pas utilisé comme jQuery prévu. En ce moment, cela dit: "Quand je clique sur 'thumb1', vérifiez si quelque chose de non-nul est renvoyé en appelant click() sur '#largephoto' Cette if-instruction sera toujours non nulle (donc c'est true), c'est pourquoi vous êtes directement redirigé vers votre lien.Vous êtes en train de cliquer par programme sur votre gros lien, sans attendre que l'on clique dessus

Il semble que vous essayez de capturer une série de clics. . événements Vous pourriez avoir à faire quelque chose comme définir une variable dans votre événement click thumb1, puis vérifiez sur l'événement, cliquez LargePhoto quelque chose comme:.

var thumbClicked = false; 

$('#thumb1').click(function() 
{ 
    thumbClicked = true; 
}); 

$('#largephoto').click(function() 
{ 
    if (thumbClicked) 
    { 
     window.location.href = 'http://www.marioplanet.com/product.asp?IDnum=1'; 
    } 
});

Source

2010-10-17 20:11:29

Merci pour cela! – Qcom

Puisque je vais faire ce code pour tous les 15 pouces, devrait mettre toutes les autres variables à false dans la fonction # thumb'nth' clic? – Qcom

Dans ce cas, vous pouvez configurer un moyen pour que vos pouces soient un peu plus dynamiques. Générez-vous le code de la vignette côté serveur ou le faites-vous manuellement côté client? –

Essayez d'abord en utilisant une classe sur tous vos pouces dire clas s = "thumbclass". Évidemment, vous aurez besoin de le modifier, mais vous pouvez voir que nous analysons l'ID du numéro de produit, puis l'URL peut être dynamique. En utilisant une classe commune, nous pouvons faire fonctionner l'événement click pour tous les pouces. Peut-être besoin de peaufiner.

var str ='', 
productID=''; 

$('.thumbclass').click(function(){ 
str = this.attr("id"); 
productID = str.match(/[0-9]/); 
}) 
$('#largephoto').click(function(){ 
    if(productID != ''){ 
    window.location.href= 'http://www.marioplanet.com/product.asp?IDnum='+productID 
    }; 
})

Source

2012-06-26 23:23:27

jQuery onclick si alors problème conditionnel window.location.href

Répondre

Questions connexes