#1 2012-04-14 16:07:27

jjemsj
Membre
Bruxelles
2012-03-28
43

[Résolu] diaporama jquery

Bonjour à tous,
encore moi :p

je ne savais pas où mettre ma question, alors je la pose ici

je voudrais savoir si il est possible de mettre un diaporama style jquery sur ma page et comment faire?
je voudrais quelque chose qui ressemble à cela http://nivo.dev7studios.com/

j'ai essayer de chercher mais je suis un peu perdu car je n'y connais pas grand chose en codage

donc par rapport à ce que j'ai ici ou là sur différents sites, si je veux faire un diaporama dans ce style, si j'ai bien compris, il me faut plusieurs choses :
le fichier jquery
un fichier css
un fichier script

c'est bien ça?

ensuite je lis qu'il faut mettre code html dans la partie head et body de la page.

est ce qu'il faut que je mette cela dans ma page index.php? et à quel endroit?

ensuite les différents fichiers où dois-je les mettre sur mon ftp?

mon gros problème en fait c'est de savoir comment placer toutes ces informations dans les différents dossiers et fichiers pour que ça fonctionne et que ça apparaisse sur ma page.

est qu'il ne risque d'y avoir de conflit avec d'autres applications de piwigo?

Merci d'avance pour celui qui pourra m'aider

Hors ligne

#2 2012-04-15 02:19:50

jjemsj
Membre
Bruxelles
2012-03-28
43

Re: [Résolu] diaporama jquery

après plusieurs bidouillages j'ai réussit à intégrer le slideshow
ça semble fonctionner correctement pour le moment :p

Hors ligne

#3 2012-04-15 07:34:17

ddtddt
Équipe Piwigo
Quetigny (21) - France
2007-07-27
14794

Re: [Résolu] diaporama jquery

...plus qu'a expliquer pour que cela serve à d'autre ;-)


Vous aimez Piwigo alors n'hésitez pas à participer avec nous, plus d'infos sur la page "Contribuer à Piwigo". Si vous n'avez pas beaucoup de temps et que vous souhaitez nous soutenir vous pouvez aussi le faire par un don.

Hors ligne

#4 2012-04-15 12:20:04

jjemsj
Membre
Bruxelles
2012-03-28
43

Re: [Résolu] diaporama jquery

alors je suis allé récupérer les fichiers sur cette page
http://nivo.dev7studios.com/pricing/
la version gratuite

ensuite sur la racine du site j'ai créé un dossier slideshow dans lequel j'ai mis les fichiers téléchargés

ça c'est la partie facile où j'avais bien compris comment il fallait faire lol

maintenant au niveau de piwigo ce que j'ai fait :

dans localfiles editor --> css j'ai copié ce code

a écrit:

//jquery slideshow
 
  .nivoSlider {
    position:relative;
    width:850px; /* Change this to your images width */
    height:400px; /* Change this to your images height */
    background:url(images/loading.gif) no-repeat 50% 50%;
}
.nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
    display:none;
}
.nivoSlider a {
    border:0;
    display:block;
}


var total = $('#slider img').length;
var rand = Math.floor(Math.random()*total);
$('#slider').nivoSlider({
    startSlide:rand
});

ensuite dans pwg stuffs j'ai créé un nouveau bloque personnel dans lequel j'ai copier ce code

a écrit:

<!-- Usually in the <head> section -->
<link rel="stylesheet" href="slideshow/nivo-slider.css" type="text/css" media="screen" /> //mettre le chemin du fichier sur votre site

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="slideshow/jquery.nivo.slider.pack.js" type="text/javascript"></script> // mettre le chemin du fichier sur votre site





<!-- Then somewhere in the <body> section -->
<left><div id="slider" class="nivoSlider">
   
    <a href="http://www.jeremie-jaspart.com/index.php?/category/amboise"><img src="slideshow/image/amboise1.jpg" alt="" title="Château d'Amboise" /></a>



</div></left>


<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider({
        effect: 'random', // Specify sets like: 'fold,fade,sliceDown'
        slices: 20, // For slice animations
        boxCols: 10, // For box animations
        boxRows: 6, // For box animations
        animSpeed: 1000, // Slide transition speed
        pauseTime: 3000, // How long each slide will show
        startSlide: 0, // Set starting Slide (0 index)
        directionNav: true, // Next & Prev navigation
        directionNavHide: true, // Only show on hover
        controlNav: false, // 1,2,3... navigation
        controlNavThumbs: false, // Use thumbnails for Control Nav
        controlNavThumbsFromRel: false, // Use image rel for thumbs
        controlNavThumbsSearch: '.jpg', // Replace this with...
        controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
        keyboardNav: false, // Use left & right arrows
        pauseOnHover: true, // Stop animation while hovering
        manualAdvance: false, // Force manual transitions
        captionOpacity: 0.8, // Universal caption opacity
        prevText: 'Prev', // Prev directionNav text
        nextText: 'Next', // Next directionNav text
        randomStart: true, // Start on a random slide
        beforeChange: function(){}, // Triggers before a slide transition
        afterChange: function(){}, // Triggers after a slide transition
        slideshowEnd: function(){}, // Triggers after all slides have been shown
        lastSlide: function(){}, // Triggers when last slide is shown
        afterLoad: function(){} // Triggers when slider has loaded
    });
});
</script>

il faut ensuite créer un dossier image dans lequel on va mettre les photos retaillé aux dimensions que l'on a choisi pour le diaporama, pour 850x400px il ne faut pas oublier de changer ces valeur au niveau du CSS de localfiles editor

ensuite dans la partie body du code on ajoute autant de fois que de photos ce code

a écrit:

<a href="http://www.jeremie-jaspart.com/index.php?/category/amboise"><img src="slideshow/image/amboise1.jpg" alt="" title="Château d'Amboise" /></a>

lien vers lequel on souhaite que l'on arrive si on clique sur la photo, chemin de la photo et après title le nom que l'on souhaite qui apparaisse sur le bas de la photo dans le diaporama

et ensuite il y a toute la fin du code qui permet de personnaliser un peu le slideshow.

Par contre je viens de tester sur internet explorer et je me rends compte que ça ne fonctionne pas, moi je suis sur firefox pas de soucis.

alors si il y a un expert qui passe par là et qui sait ce qu'il faudrait faire pour que le diaporama fonctionne correctement sur IE ça serait bien.
Et chez vous est ce que vous le voyez s'afficher?

Hors ligne

#5 2012-04-15 13:13:36

Philou1070
Membre
Bruxelles
2006-07-02
162

Re: [Résolu] diaporama jquery

Marche bien sous Firefox 11, marche pas sous IE9

Hors ligne

Pied de page des forums

Propulsé par FluxBB

github twitter facebook newsletter Faire un don Piwigo.org © 2002-2020 · Contact