1. Accueil
  2. Question et réponse
  3. jcarousel - Comment lier une image à une URL?

jcarousel - Comment lier une image à une URL?

2017-06-03 1 views
0

En utilisant des carrousels jcarousel connectés, je voudrais relier chaque image à une URL. J'ai essayé d'ajouter des balises de lien autour de chaque image, mais le lien ne fonctionne que si l'image est la première ou la dernière dans le diaporama, sinon, cliquer sur l'image passe à la diapositive suivante. Un exemple peut être vu ici: https://www.bostonrescue.net/special-needs-spotlight/special-needs-spotlight.htmljcarousel - Comment lier une image à une URL?

TÊTE:

<link href="../styles.css" rel="stylesheet" type="text/css"/> 
<link href="../jcarousel.connected-carousels.css" rel="stylesheet" type="text/css"/> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script type="text/javascript" src="/scripts/jquery.jcarousel.min.js"></script> 
<script type="text/javascript" src="/scripts/jcarousel.connected-carousels.js"></script>

HTML:

<div class="connected-carousels"> 
    <div class="stage"> 
    <div class="carousel carousel-stage"> 
     <ul> 
     <li><a href="/url_1.html"><img src="/image_1.jpg" alt="Image 1" /></a><br /><a href="/url_1.html">Image 1</a></li> 
     <li><a href="/url_2.html"><img src="/image_2.jpg" alt="Image 2" /></a><br /><a href="/url_2.html">Image 2</a></li> 
     <li><a href="/url_3.html"><img src="/image_3.jpg" alt="Image 3" /></a><br /><a href="/url_3.html">Image 3</a></li>       
     </ul> 
    </div> 
    <a href="#" class="prev prev-stage"><span>&lsaquo;</span></a> 
    <a href="#" class="next next-stage"><span>&rsaquo;</span></a> 
</div>

CSS:

/** Stage container **/ 

.connected-carousels .stage { 
    width: 585px; 
    margin: 20px auto; 
    position: relative; 
} 

.connected-carousels .carousel img { 
    border-style: solid; 
    border-width: 2px; 
    margin: 0px 5px 5px 0px; 
    height: 200px; 
} 

.connected-carousels .photo-credits { 
    position: absolute; 
    right: 15px; 
    bottom: 0; 
    font-size: 13px; 
    color: #fff; 
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.85); 
    opacity: .66; 
} 

.connected-carousels .photo-credits a { 
    color: #fff; 
} 

/** Navigation container **/ 

.connected-carousels .navigation { 
    width: 500px; 
    margin: 20px auto; 
    position: relative; 
} 

/** Shared carousel styles **/ 

.connected-carousels .carousel { 
    overflow: hidden; 
    position: relative; 
} 

.connected-carousels .carousel ul { 
    width: 20000em; 
    position: relative; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 

.connected-carousels .carousel li { 
    float: left; 
    text-align: center; 
} 

/** Stage carousel specific styles **/ 

.connected-carousels .carousel-stage { 
    height: 225px; 
    border: 10px solid #fff; 
    -webkit-border-radius: 5px; 
     -moz-border-radius: 5px; 
      border-radius: 5px; 
    -webkit-box-shadow: 0 0 2px #999; 
     -moz-box-shadow: 0 0 2px #999; 
      box-shadow: 0 0 2px #999; 
} 

/** Navigation carousel specific styles **/ 

.connected-carousels .carousel-navigation { 
    height: 60px; 
    width: 480px; 
    background: #fff; 
    border: 10px solid #fff; 
    -webkit-border-radius: 5px; 
     -moz-border-radius: 5px; 
      border-radius: 5px; 
    -webkit-box-shadow: 0 0 2px #999; 
     -moz-box-shadow: 0 0 2px #999; 
      box-shadow: 0 0 2px #999; 
} 

.connected-carousels .carousel-navigation li { 
    cursor: pointer; 
} 

.connected-carousels .carousel-navigation li img { 
    display: block; 
    border: 5px solid #fff; 
} 

.connected-carousels .carousel-navigation li.active img { 
    border-color: #ccc; 
} 

/** Stage carousel controls **/ 

.connected-carousels .prev-stage, 
.connected-carousels .next-stage { 
    display: block; 
    position: absolute; 
    top: 0; 
    width: 305px; 
    height: 410px; 
    color: #fff; 
} 

.connected-carousels .prev-stage { 
    left: 0; 
} 

.connected-carousels .next-stage { 
    right: 0; 
} 

.connected-carousels .prev-stage.inactive, 
.connected-carousels .next-stage.inactive { 
    display: none; 
} 

.connected-carousels .prev-stage span, 
.connected-carousels .next-stage span { 
    display: none; 
    position: absolute; 
    top: 25%; 
    width: 30px; 
    height: 30px; 
    text-align: center; 
    background: #4E443C; 
    color: #fff; 
    text-decoration: none; 
    text-shadow: 0 0 1px #000; 
    font: 24px/27px Arial, sans-serif; 
    -webkit-border-radius: 30px; 
     -moz-border-radius: 30px; 
      border-radius: 30px; 
    -webkit-box-shadow: 0 0 2px #999; 
     -moz-box-shadow: 0 0 2px #999; 
      box-shadow: 0 0 2px #999; 
} 

.connected-carousels .prev-stage span { 
    left: 20px; 
} 

.connected-carousels .next-stage span { 
    right: 20px; 
} 

.connected-carousels .prev-stage:hover span, 
.connected-carousels .next-stage:hover span { 
    display: block; 
} 

/** Navigation carousel controls **/ 

.connected-carousels .prev-navigation, 
.connected-carousels .next-navigation { 
    display: block; 
    position: absolute; 
    width: 30px; 
    height: 30px; 
    background: #4E443C; 
    color: #fff; 
    text-decoration: none; 
    text-shadow: 0 0 1px #000; 
    font: 16px/29px Arial, sans-serif; 
    -webkit-border-radius: 30px; 
     -moz-border-radius: 30px; 
      border-radius: 30px; 
    -webkit-box-shadow: 0 0 2px #999; 
     -moz-box-shadow: 0 0 2px #999; 
      box-shadow: 0 0 2px #999; 
} 

.connected-carousels .prev-navigation { 
    left: -15px; 
    top: 22px; 
    text-indent: 6px; 
} 

.connected-carousels .next-navigation { 
    right: -15px; 
    top: 22px; 
    text-indent: 20px; 
} 

.connected-carousels .prev-navigation.inactive, 
.connected-carousels .next-navigation.inactive { 
    opacity: .5; 
    cursor: default; 
}

JAVASCRIPT: jcarousel.connected-carousels.js (fonction de connecteur chargée en plus de jquery.jcarousel.min.js)

(function($) { 
    // This is the connector function. 
    // It connects one item from the navigation carousel to one item from the 
    // stage carousel. 
    // The default behaviour is, to connect items with the same index from both 
    // carousels. This might _not_ work with circular carousels! 
    var connector = function(itemNavigation, carouselStage) { 
     return carouselStage.jcarousel('items').eq(itemNavigation.index()); 
    }; 

    $(function() { 
     // Setup the carousels. Adjust the options for both carousels here. 
     var carouselStage  = $('.carousel-stage').jcarousel(); 
     var carouselNavigation = $('.carousel-navigation').jcarousel(); 

     // We loop through the items of the navigation carousel and set it up 
     // as a control for an item from the stage carousel. 
     carouselNavigation.jcarousel('items').each(function() { 
      var item = $(this); 

      // This is where we actually connect to items. 
      var target = connector(item, carouselStage); 

      item 
       .on('jcarouselcontrol:active', function() { 
        carouselNavigation.jcarousel('scrollIntoView', this); 
        item.addClass('active'); 
       }) 
       .on('jcarouselcontrol:inactive', function() { 
        item.removeClass('active'); 
       }) 
       .jcarouselControl({ 
        target: target, 
        carousel: carouselStage 
       }); 
     }); 

     // Setup controls for the stage carousel 
     $('.prev-stage') 
      .on('jcarouselcontrol:inactive', function() { 
       $(this).addClass('inactive'); 
      }) 
      .on('jcarouselcontrol:active', function() { 
       $(this).removeClass('inactive'); 
      }) 
      .jcarouselControl({ 
       target: '-=1' 
      }); 

     $('.next-stage') 
      .on('jcarouselcontrol:inactive', function() { 
       $(this).addClass('inactive'); 
      }) 
      .on('jcarouselcontrol:active', function() { 
       $(this).removeClass('inactive'); 
      }) 
      .jcarouselControl({ 
       target: '+=1' 
      }); 

     // Setup controls for the navigation carousel 
     $('.prev-navigation') 
      .on('jcarouselcontrol:inactive', function() { 
       $(this).addClass('inactive'); 
      }) 
      .on('jcarouselcontrol:active', function() { 
       $(this).removeClass('inactive'); 
      }) 
      .jcarouselControl({ 
       target: '-=1' 
      }); 

     $('.next-navigation') 
      .on('jcarouselcontrol:inactive', function() { 
       $(this).addClass('inactive'); 
      }) 
      .on('jcarouselcontrol:active', function() { 
       $(this).removeClass('inactive'); 
      }) 
      .jcarouselControl({ 
       target: '+=1' 
      }); 
    }); 
})(jQuery);

Source

2017-06-03 m0nde

Répondre

0

Afin d'atteindre le résultat que vous devez changer la hauteur, la largeur de votre:

.connected-carousels .prev-stage, 
.connected-carousels .next-stage 


var connector = function(itemNavigation, carouselStage) { 
 
    return carouselStage.jcarousel('items').eq(itemNavigation.index()); 
 
}; 
 

 
$(function() { 
 
    // Setup the carousels. Adjust the options for both carousels here. 
 
    var carouselStage  = $('.carousel-stage').jcarousel(); 
 
    var carouselNavigation = $('.carousel-navigation').jcarousel(); 
 

 
    // We loop through the items of the navigation carousel and set it up 
 
    // as a control for an item from the stage carousel. 
 
    carouselNavigation.jcarousel('items').each(function() { 
 
     var item = $(this); 
 

 
     // This is where we actually connect to items. 
 
     var target = connector(item, carouselStage); 
 

 
     item 
 
       .on('jcarouselcontrol:active', function() { 
 
        carouselNavigation.jcarousel('scrollIntoView', this); 
 
        item.addClass('active'); 
 
       }) 
 
       .on('jcarouselcontrol:inactive', function() { 
 
        item.removeClass('active'); 
 
       }) 
 
       .jcarouselControl({ 
 
        target: target, 
 
        carousel: carouselStage 
 
       }); 
 
    }); 
 

 
    // Setup controls for the stage carousel 
 
    $('.prev-stage') 
 
      .on('jcarouselcontrol:inactive', function() { 
 
       $(this).addClass('inactive'); 
 
      }) 
 
      .on('jcarouselcontrol:active', function() { 
 
       $(this).removeClass('inactive'); 
 
      }) 
 
      .jcarouselControl({ 
 
       target: '-=1' 
 
      }); 
 

 
    $('.next-stage') 
 
      .on('jcarouselcontrol:inactive', function() { 
 
       $(this).addClass('inactive'); 
 
      }) 
 
      .on('jcarouselcontrol:active', function() { 
 
       $(this).removeClass('inactive'); 
 
      }) 
 
      .jcarouselControl({ 
 
       target: '+=1' 
 
      }); 
 

 
    // Setup controls for the navigation carousel 
 
    $('.prev-navigation') 
 
      .on('jcarouselcontrol:inactive', function() { 
 
       $(this).addClass('inactive'); 
 
      }) 
 
      .on('jcarouselcontrol:active', function() { 
 
       $(this).removeClass('inactive'); 
 
      }) 
 
      .jcarouselControl({ 
 
       target: '-=1' 
 
      }); 
 

 
    $('.next-navigation') 
 
      .on('jcarouselcontrol:inactive', function() { 
 
       $(this).addClass('inactive'); 
 
      }) 
 
      .on('jcarouselcontrol:active', function() { 
 
       $(this).removeClass('inactive'); 
 
      }) 
 
      .jcarouselControl({ 
 
       target: '+=1' 
 
      }); 
 
});
/** Stage container **/ 
 
.connected-carousels .stage { 
 
    width: 450px; 
 
    margin: 20px auto; 
 
    position: relative; 
 
} 
 

 
.connected-carousels .carousel img { 
 
    border-style: solid; 
 
    border-width: 2px; 
 
    margin: 0px 5px 5px 0px; 
 
    height: 200px; 
 
} 
 

 
.connected-carousels .photo-credits { 
 
    position: absolute; 
 
    right: 15px; 
 
    bottom: 0; 
 
    font-size: 13px; 
 
    color: #fff; 
 
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.85); 
 
    opacity: .66; 
 
} 
 

 
.connected-carousels .photo-credits a { 
 
    color: #fff; 
 
} 
 

 
/** Navigation container **/ 
 
.connected-carousels .navigation { 
 
    width: 500px; 
 
    margin: 20px auto; 
 
    position: relative; 
 
} 
 

 
/** Shared carousel styles **/ 
 
.connected-carousels .carousel { 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
.connected-carousels .carousel ul { 
 
    width: 20000em; 
 
    position: relative; 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.connected-carousels .carousel li { 
 
    float: left; 
 
    text-align: center; 
 
} 
 

 
/** Stage carousel specific styles **/ 
 
.connected-carousels .carousel-stage { 
 
    height: 250px; 
 
    border: 10px solid #fff; 
 
    -webkit-border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    border-radius: 5px; 
 
    -webkit-box-shadow: 0 0 2px #999; 
 
    -moz-box-shadow: 0 0 2px #999; 
 
    box-shadow: 0 0 2px #999; 
 
} 
 

 
/** Navigation carousel specific styles **/ 
 
.connected-carousels .carousel-navigation { 
 
    height: 60px; 
 
    width: 480px; 
 
    background: #fff; 
 
    border: 10px solid #fff; 
 
    -webkit-border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    border-radius: 5px; 
 
    -webkit-box-shadow: 0 0 2px #999; 
 
    -moz-box-shadow: 0 0 2px #999; 
 
    box-shadow: 0 0 2px #999; 
 
} 
 

 
.connected-carousels .carousel-navigation li { 
 
    cursor: pointer; 
 
} 
 

 
.connected-carousels .carousel-navigation li img { 
 
    display: block; 
 
    border: 5px solid #fff; 
 
} 
 

 
.connected-carousels .carousel-navigation li.active img { 
 
    border-color: #ccc; 
 
} 
 

 
/** Stage carousel controls **/ 
 
.connected-carousels .prev-stage, 
 
.connected-carousels .next-stage { 
 
    display: block; 
 
    position: absolute; 
 
    top: 100px; 
 
    left: 410px; 
 
    width: 30px; 
 
    height: 20px; 
 
    color: #fff; 
 
} 
 

 
.connected-carousels .prev-stage { 
 
    left: 0; 
 
} 
 

 
.connected-carousels .next-stage { 
 
    right: 0; 
 
} 
 

 
.connected-carousels .prev-stage.inactive, 
 
.connected-carousels .next-stage.inactive { 
 
    display: none; 
 
} 
 

 
.connected-carousels .prev-stage span, 
 
.connected-carousels .next-stage span { 
 
    display: none; 
 
    position: absolute; 
 
    top: 25%; 
 
    width: 30px; 
 
    height: 30px; 
 
    text-align: center; 
 
    background: #4E443C; 
 
    color: #fff; 
 
    text-decoration: none; 
 
    text-shadow: 0 0 1px #000; 
 
    font: 24px/27px Arial, sans-serif; 
 
    -webkit-border-radius: 30px; 
 
    -moz-border-radius: 30px; 
 
    border-radius: 30px; 
 
    -webkit-box-shadow: 0 0 2px #999; 
 
    -moz-box-shadow: 0 0 2px #999; 
 
    box-shadow: 0 0 2px #999; 
 
} 
 

 
.connected-carousels .prev-stage span { 
 
    left: 20px; 
 
} 
 

 
.connected-carousels .next-stage span { 
 
    right: 20px; 
 
} 
 

 
.connected-carousels .prev-stage:hover span, 
 
.connected-carousels .next-stage:hover span { 
 
    display: block; 
 
} 
 

 
/** Navigation carousel controls **/ 
 
.connected-carousels .prev-navigation, 
 
.connected-carousels .next-navigation { 
 
    display: block; 
 
    position: absolute; 
 
    width: 30px; 
 
    height: 30px; 
 
    background: #4E443C; 
 
    color: #fff; 
 
    text-decoration: none; 
 
    text-shadow: 0 0 1px #000; 
 
    font: 16px/29px Arial, sans-serif; 
 
    -webkit-border-radius: 30px; 
 
    -moz-border-radius: 30px; 
 
    border-radius: 30px; 
 
    -webkit-box-shadow: 0 0 2px #999; 
 
    -moz-box-shadow: 0 0 2px #999; 
 
    box-shadow: 0 0 2px #999; 
 
} 
 

 
.connected-carousels .prev-navigation { 
 
    left: -15px; 
 
    top: 22px; 
 
    text-indent: 6px; 
 
} 
 

 
.connected-carousels .next-navigation { 
 
    right: -15px; 
 
    top: 22px; 
 
    text-indent: 20px; 
 
} 
 

 
.connected-carousels .prev-navigation.inactive, 
 
.connected-carousels .next-navigation.inactive { 
 
    opacity: .5; 
 
    cursor: default; 
 
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jcarousel/0.3.5/jquery.jcarousel.min.js"></script> 
 

 

 
<div class="connected-carousels"> 
 
    <div class="stage"> 
 
     <div class="carousel carousel-stage"> 
 
      <ul> 
 
       <li><a href="/url_1.html"><img src="https://dummyimage.com/100x100/fff/000&text=1" alt="Image 1" /></a><br /><a href="/url_1.html">Image 1</a></li> 
 
       <li><a href="/url_2.html"><img src="https://dummyimage.com/100x100/fff/000&text=2" alt="Image 2" /></a><br /><a href="/url_2.html">Image 2</a></li> 
 
       <li><a href="/url_3.html"><img src="https://dummyimage.com/100x100/fff/000&text=3" /></a><br /><a href="/url_3.html">Image 3</a></li> 
 
       <li><a href="/url_4.html"><img src="https://dummyimage.com/100x100/fff/000&text=4" /></a><br /><a href="/url_4.html">Image 4</a></li> 
 
       <li><a href="/url_5.html"><img src="https://dummyimage.com/100x100/fff/000&text=5" /></a><br /><a href="/url_5.html">Image 5</a></li> 
 
      </ul> 
 
     </div> 
 
     <a href="#" class="prev prev-stage"><span>&lsaquo;</span></a> 
 
     <a href="#" class="next next-stage"><span>&rsaquo;</span></a> 
 
    </div> 
 
</div>

Source

2017-06-03 15:00:18 gaetanoM

+0

J'ai tout de ceux ajoutés au sommet. Ma question concerne un ajout spécifique à jcarousel qui est chargé avec jcarousel.min.js appelé jcarousel.connected-carousels.js J'ai ajouté la liste de css et de scripts à ma question. – m0nde

+0

@ m0nde Pouvez-vous essayer maintenant et faites le moi savoir? Merci – gaetanoM

+0

Votre solution a fonctionné. Merci de votre aide. – m0nde

 Questions connexes

  • Aucun problème connexe^_^