Really Simple Diaporama ouvrir le lien dans une nouvelle fenêtre

J'utilise le Really Simple slideshow et nulle part dans la page n'a un moyen de cliquer sur un diaporama pour ouvrir dans une nouvelle fenêtre ou un onglet (target="_blank") à certains liens.Really Simple Diaporama ouvrir le lien dans une nouvelle fenêtre

Je donne les résultats suivants, mais il ouvre toujours dans la même page:

<html> 
    <head> 

    <link rel="stylesheet" href="http://reallysimpleworks.com/slideshow/demo/css/style.css"> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script src="http://reallysimpleworks.com/slideshow/demo/js/jquery.rs.slideshow.js?v1.4.10"></script> 

    <script type="text/javascript"> 

      $(document).ready(function() { 

       var opts = { 
        controls: { 
         playPause: {auto: false}, 
         previousSlide: {auto: false}, 
         nextSlide: {auto: false}, 
         index: {auto: false} 
        }, 
        slide_data_selectors: { 
         caption: {selector: 'div.caption', attr: false} 
        }, 
        effect: 'slideLeft', 
        interval: 4, 
        transition: 500 
       }; 
       $('.rs-slideshow').rsfSlideshow(opts); 

      });  

</script> 


</head> 

<body> 

     <div class="main"> 
      <section class="demo-section clearfix" id="demo-1"> 
       <div id="slideshow-capts-links" class="rs-slideshow"> 
        <div class="slide-container" style=""> 
         <img src="http://reallysimpleworks.com/slideshow/demo/images/morzine-2011-a.png" class="rsf-slideshow-image" style="left: 0px; top: 0px; "> 
          <div class="slide-caption">This is a caption for the first slide.</div> 
        </div> 
        <ol class="slides"> 
         <li> 
          <a href="http://reallysimpleworks.com/slideshow/demo/images/morzine-2011-a.png" ></a> 
         </li> 
         <li> 
          <a href="http://reallysimpleworks.com/slideshow/demo/images/morzine-2011-b.png" target="_blank" data-link-to="http://reallysimpleworks.com"></a> 
           <div class="caption"> 
               <p>This slide has the hyperlink</p> 
           </div> 
         </li> 
         <li> 
          <a href="http://reallysimpleworks.com/slideshow/demo/images/morzine-2011-c.png"></a> 
         </li> 
        </ol> 
      </section>  
     </div> 

</body> 
</html>

EDIT

J'ai essayé le code suivant comme suggéré par Jigar Savla et yurtdweller mais il maintient l'ouverture dans la même page. J'avais essayé dans Chrome et IE.

<html> 
    <head> 

    <link rel="stylesheet" href="http://reallysimpleworks.com/slideshow/demo/css/style.css"> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script src="http://reallysimpleworks.com/slideshow/demo/js/jquery.rs.slideshow.js?v1.4.10"></script> 

    <script type="text/javascript"> 

      $(document).ready(function() { 

       var opts = { 
        controls: { 
         playPause: {auto: false}, 
         previousSlide: {auto: false}, 
         nextSlide: {auto: false}, 
         index: {auto: false} 
        }, 
        slide_data_selectors: { 
         caption: {selector: 'div.caption', attr: false} 
        }, 
        effect: 'slideLeft', 
        interval: 4, 
        transition: 500 
       }; 
       $('.rs-slideshow').rsfSlideshow(opts); 

       $('a.open_in_new_window').attr('target', '_blank'); 


      });  

    </script> 


</head> 

<body> 

     <div class="main"> 
      <section class="demo-section clearfix" id="demo-1"> 
       <div id="slideshow-capts-links" class="rs-slideshow"> 
        <div class="slide-container" style=""> 
         <img src="http://reallysimpleworks.com/slideshow/demo/images/morzine-2011-a.png" class="rsf-slideshow-image" style="left: 0px; top: 0px; "> 
          <div class="slide-caption">This is a caption for the first slide.</div> 
        </div> 
        <ol class="slides"> 
         <li> 
          <a href="http://reallysimpleworks.com/slideshow/demo/images/morzine-2011-a.png" ></a> 
         </li> 
         <li> 
          <a class="open_in_new_window" href="http://reallysimpleworks.com/slideshow/demo/images/morzine-2011-b.png" data-link-to="http://reallysimpleworks.com"></a> 
           <div class="caption"> 
               <p>This slide has the hyperlink</p> 
           </div> 
         </li> 
         <li> 
          <a href="http://reallysimpleworks.com/slideshow/demo/images/morzine-2011-c.png"></a> 
         </li> 
        </ol> 
      </section>  
     </div> 

</body> 
</html>

Modifier après la réponse

OK, je l'ai!
Merci à Jigar Savla's exemple de code, je viens ajouté quelques nouvelles lignes dans le Javascript:

// Under if (slide.link_to) ...
if (slide.link_to_new_page) { $img = $('<a href="' + slide.link_to_new_page + '" target="_blank"></a>').append($img); }

// Under link_to: {selector: 'a', attr: 'data-link-to'}, ...
link_to_new_page: {selector: 'a', attr: 'data-link-to-new-page'},

Et dans le html changé data-link-to=http://google.com en data-link-to-new-page=http://google.com

Maintenant si je veux juste utiliser le lin k et l'ouvrir dans la même page J'utilise data-link-to, sinon data-link-to-new-page.

J'ai bien travaillé !! MERCI!

Source

2012-11-01 Rick

Eh bien, je vous aurais demandé d'ajouter une classe distincte pour chaque balise d'ancrage dont vous avez besoin pour ouvrir un lien dans une nouvelle fenêtre.

dire par exemple si vous avez utilisé open_in_new_window comme nom de classe pour ouvrir les liens dans une nouvelle fenêtre que le code deviendrait:

$('a.open_in_new_window').attr('target', '_blank');

espérons que cette aide;)

Source

2012-11-01 21:22:22

J'ai ajouté ce code juste après '$ ('. Rs-slideshow'). RsfSlideshow (opts);' et ajouté 'class =" open_in_new_window "' sur la balise '' où 'data-link-to =" http://reallysimpleworks.com "' est situé, mais ne semble pas fonctionner. – Rick

ouais je viens de vérifier, vous pouvez faire avec ce '$ ('a.open_in_new_window'). $ (This) .attr ('target', '_blank');' insérer ce code juste après '$ ('. Rs -slideshow '). rsfSlideshow (opts); ' acclame! :) –

J'ai eu l'erreur JavaScript: "TypeError Uncaught: Object [objet objet] n'a pas de méthode '$'" – Rick

Vous pouvez ajouter

$('a').click(function() { 
$(this).attr('target', '_blank'); 
});

après

$('.rs-slideshow').rsfSlideshow(opts);

cela fera tous les liens sur la page ouverte dans une nouvelle fenêtre. Si vous avez des classes sur les liens, nous pouvons changer le code pour cibler ces classes spécifiques et ouvrir uniquement celles que vous voulez sélectionner.

Source

2012-11-01 19:12:21 codeadventurer

j'avais essayé, mais n'a pas fonctionné. Aussi, j'ai oublié de mentionner que je ne veux pas que tous les liens s'ouvrent dans une nouvelle fenêtre. – Rick

@Rick mettre à jour votre question avec le problème approprié puis – footy

Parce que génère Diaporama Really Simple le code HTML de chaque diapositive à la volée, juste avant la transition, vous devrez cibler les liens après leur génération.Vous pouvez le faire en attachant à l'événement rsPostTransition:

$('#my-slideshow').bind('rsPostTransition', function() { 
    $('#my-slideshow a.open_in_new_window').attr('target', '_blank'); 
});

Ou vous pouvez utiliser les événements délégués de jQuery, ce qui est probablement l'option plus propre:

$('#my-slideshow').on('click', 'a.open_in_new_window', function() { 
    $(this).attr('target', '_blank'); 
});

Source

2012-11-02 15:45:35 user1391161

Dois-je définir 'my-slideshow' comme ID dans la balise ? – Rick

Non, c'est l'ID de l'élément auquel vous appliquez le plugin Really Simple Slideshow. Pour plus de détails sur la syntaxe jQuery pour les événements délégués, voir le document [docs for 'on'] (http://api.jquery.com/on/) – user1391161

Donc j'utiliserais simplement .rs-slideshow, selon mon exemple. De toute façon j'ai utilisé '$ ('. Rs-slideshow'). Bind ('rsPostTransition', function() { $ ('. Rs-slideshow a.open_in_new_window'). Attr ('target', '_blank'); }); 'et' $ ('. rs-slideshow'). on ('clic', 'a.open_in_new_window', function() { $ (this) .attr ('target', '_blank'); }); ', mais s'ouvre toujours dans la même fenêtre. – Rick

Really Simple Diaporama ouvrir le lien dans une nouvelle fenêtre

Répondre

Questions connexes