Faire fonctionner le plugin jQuery tubular [Résolu/Fermé]

Signaler
Messages postés
38
Date d'inscription
jeudi 5 février 2015
Statut
Membre
Dernière intervention
22 août 2016
-
Messages postés
2853
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
-
Bonjour,

Je suis en train de créer mon site web et j'ai trouvé ce système de design vraiment sympa:

http://www.seanmccambridge.com/tubular/

Le problème c'est que j'ai aucune idée de comment le faire fonctionner :(
( Quel code, comment faire fonctionner Java, quel ordre, etc, )

Est-ce que quelqu'un pourrait m'expliquer facilement comment je peux mettre en place ce plugin?

Merci !

2 réponses

Messages postés
2853
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
570
salut
très facile
tu télécharge https://jquery-tubular.googlecode.com/files/jquery.tubular.1.0.1.zip tu mets le dossier js à la racine de ton site

ensuite dans le head tu colle ce bout de code
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.tubular.1.0.js"></script>
<script type="text/javascript" charset="utf-8" src="js/index.js"></script>


dans index.js tu peux changer l'id de la video (id youtube)
dans jquery.tubular.1.0.js tu peux modifier les options

après <body> tu mets <div id="wrapper" class="clearfix">
avant </body> tu mets </div>

dans ton css tu mets

.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}

.clearfix:after {
clear: both;
}

#wrapper { width: 960px; margin: 0 auto; padding: 48px 0 72px; } /*a modifier selon ton site*/

Messages postés
38
Date d'inscription
jeudi 5 février 2015
Statut
Membre
Dernière intervention
22 août 2016

Ah ! Super ! Ça marche nickel !

Je te remercie pour ta réponse claire et précise !

J'ai deux autres petites questions, j'ai pris un screen: http://puu.sh/fyqNR/9c4bfb8b26.jpg

Tu sais comment enlever la ligne du code tout en haut ?
Et puis saurais-tu pourquoi j'ai pas les cadres noirs autour du texte comme dans l'exemple ?

Merci encore ;P
Messages postés
760
Date d'inscription
samedi 29 mars 2014
Statut
Membre
Dernière intervention
8 septembre 2018
97
Bonjour,

Pour le ligne de code :
$('#wrapper').tubular({videoId: 'QnaMOPYKXR4'});
il faut supprimer la ligne 20 de la page index.html
< code>$('#wrapper').tubular({videoId: 'QnaMOPYKXR4'});</ code>

et pour le fond des texte qui forme un cadre noir transparent, il faut creer un dossier media et y upload l'image black-50-trans.png que tu trouvera la:
http://www.seanmccambridge.com/tubular/media/black-50-trans.png
Messages postés
38
Date d'inscription
jeudi 5 février 2015
Statut
Membre
Dernière intervention
22 août 2016

Ça marche ! :D

Encore merci pour ces réponses !
Messages postés
2853
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
570
tu peux mettre le sujet en résolu si c'est OK