11499 sujets

JavaScript, DOM et API Web HTML5

Jquerry Caroussel /JcoverFlip

Bonjour,

Je suis en train de construire un site web pour un groupe de musique.
Je voudrais mettre une galerie de type CoverFlip pour les pochettes d'album.

J'ai trouvé le plugin Jquery Waterwheel, qui est super simple. Pas eu de soucis pour le mettre en place.
Par contre je voudrais rajouter un texte en dessous mes images, mais je n'y arrive pas..

J'ai essayé avec des <span> ou <span class = > mais la je m'arrache un peu les cheveux..

Du coup j'ai essayé avec le plugin JCoverFlip, mais je n'arrive pas à la faire fonctionner...

Quelqu'un peut m'aider?


Mon code avec Waterwheel Carousel :


<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="theme/jQuery-Waterwheel-Carousel/js/jquery.waterwheelCarousel.min.js"></script>
<script type="text/javascript">
  
  $(document).ready(function () {
        var carousel = $("#carousel").waterwheelCarousel({
          flankingItems: 3,
          movingToCenter: function ($item) {
            $('#callback-output').prepend('movingToCenter: ' + $item.attr('id') + '<br/>');
          },
          movedToCenter: function ($item) {
            $('#callback-output').prepend('movedToCenter: ' + $item.attr('id') + '<br/>');
          },
          movingFromCenter: function ($item) {
            $('#callback-output').prepend('movingFromCenter: ' + $item.attr('id') + '<br/>');
          },
          movedFromCenter: function ($item) {
            $('#callback-output').prepend('movedFromCenter: ' + $item.attr('id') + '<br/>');
          },
          clickedCenter: function ($item) {
            $('#callback-output').prepend('clickedCenter: ' + $item.attr('id') + '<br/>');
          }
        });

        $('#prev').bind('click', function () {
          carousel.prev();
          return false
        });

        $('#next').bind('click', function () {
          carousel.next();
          return false;
        });

        $('#reload').bind('click', function () {
          newOptions = eval("(" + $('#newoptions').val() + ")");
          carousel.reload(newOptions);
          return false;
        });

      });
	  
</script>

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





<body>

<div id="carousel">
<img src="theme/48A.png" alt="Image 1" /> 
<img src="theme/48A.png" alt="Image 2" />
<img src="theme/48A.png" alt="Image 3" />
<img src="theme/48A.png" alt="Image 4" />
<img src="theme/48A.png" alt="Image 5" />
</div>



</body>
</html>

et le css :

<style type="text/css">
  #carousel {
    width:800px;
    height: 300px;
    display: relative;
  }
  #carousel img {
    display: hidden;  
    cursor: pointer;
	}  

  
</style>


Et le code avec JcoverFlip : 


<link href="test.css" rel="stylesheet" type="text/css" />
<script type="text/javascript"  src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="theme/jcoverflip-1.0.2/jquery.jcoverflip.js"> </script>

<script>
  $(function(){
    $('#flip').jcoverflip();
 
  });
  
 
  </script>

</head>
<body>
   
<ul id="flip">
    <li><a href="#"><img src="theme/48A.png"><span class="title">My title</span></a></li>
      <li><a href="#"><img src="theme/49A.png"><span class="title">My title</span></a></li>
        <li><a href="#"><img src="theme/50A.png"><span class="title">My title</span></a></li>

   
  </ul>




</body>
</html>


Son css :

.ui-jcoverflip {position: relative;}
.ui-jcoverflip--item {position: absolute; display: block;}




Merci d'avance.
Sujet clos
Aller à