Faire fonctionner le plugin jQuery tubular

Résolu/Fermé
Skyronn Messages postés 38 Date d'inscription jeudi 5 février 2015 Statut Membre Dernière intervention 22 août 2016 - 6 févr. 2015 à 13:19
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 6 févr. 2015 à 21:54
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 !
A voir également:

2 réponses

animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 737
6 févr. 2015 à 15:52
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*/

0
Skyronn Messages postés 38 Date d'inscription jeudi 5 février 2015 Statut Membre Dernière intervention 22 août 2016
6 févr. 2015 à 18:32
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
0
codeurh24 Messages postés 760 Date d'inscription samedi 29 mars 2014 Statut Membre Dernière intervention 8 septembre 2018 123
Modifié par codeurh24 le 6/02/2015 à 19:05
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
0
Skyronn Messages postés 38 Date d'inscription jeudi 5 février 2015 Statut Membre Dernière intervention 22 août 2016
6 févr. 2015 à 20:34
Ça marche ! :D

Encore merci pour ces réponses !
0
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 737
6 févr. 2015 à 21:54
tu peux mettre le sujet en résolu si c'est OK
0