Problème d'affichage de vidéos vimeo avec l'effet fancybox
Cusma
Messages postés
3
Date d'inscription
Statut
Membre
Dernière intervention
-
Cusma Messages postés 3 Date d'inscription Statut Membre Dernière intervention -
Cusma Messages postés 3 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
J'ai acheté un model de site sur template monster, avec une section portfolio à la base créée pour afficher des images avec l'effet fancybox, et j'essaie tant bien que mal d'afficher des vidéos viméo et autre à la place. J'ai tout juste réussi à afficher les players de mes vidéos, mais l'effet fancybox reste absent à l'appel. A préciser que je ne suis ni programmeur, ni graphiste, je n'ai aucune connaissance dans ce domaine :/ Mais je désire apprendre et comprendre afin d'administrer correctement mon site!
Voila le code de toute la page :
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Folio</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
<meta name="description" content="Your description">
<meta name="keywords" content="Your keywords">
<meta name="author" content="Your name">
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/preview.css" type="text/css">
<script type="text/javascript" src="js/include_script.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<link href="css/ie.css" rel="stylesheet" type="text/css">
<![endif]-->
</head>
<body>
<!--content wrapper-->
<div id="wrapper">
<section>
<div class="dynamicContent">
<!--content-->
<div class="row">
<div class="span12 _relative">
<h2>portfolio</h2>
<div id="jcarousel_1">
<ul>
<li>
<a class="iframe" href="https://player.vimeo.com/video/91912482"><span class="_over"></span>
<img class="img-polaroid" src="img/VDT.png" alt="">
</a></li>
<li>
<a class="iframe" href="https://player.vimeo.com/video/91912480">
<span class="_over"></span>
<img class="img-polaroid" src="img/A3sportback.png" alt="">
</a></li>
<li>
<a class="iframe" href="https://player.vimeo.com/video/91912479">
<span class="_over"></span>
<img class="img-polaroid" src="img/Lavitessedupasse.png" alt="">
</a></li>
<li>
<a class="iframe" href="https://player.vimeo.com/video/63856411">
<span class="_over"></span>
<img class="img-polaroid" src="img/thumbnail1.png" alt="">
</a></li>
<li>
<a class="iframe" href="https://player.vimeo.com/video/63856410">
<span class="_over"></span>
<img class="img-polaroid" src="img/thumbnail3.png" alt="">
</a></li>
<li>
<a class="iframe" href="https://player.vimeo.com/video/68436296">
<span class="_over"></span>
<img class="img-polaroid" src="img/thumbnail7.png" alt="">
</a></li>
<li>
<a rel="Appendix" href="https://www.jeuxvideo.com/videos/iframe/111458" class="pic margin6">
<span class="_over"></span>
<img class="img-polaroid" src="img/thumbnail5.png" alt="">
</a></li>
</ul>
</div>
<div class="btnHolder1">
<a href="#" class="nextBtn"><img src="img/sprite_btn_next.png" alt=""></a>
<a href="#" class="prevBtn"><img src="img/sprite_btn_prev.png" alt=""></a>
</div>
</div>
</div>
</div>
</section>
</div>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/jcarousellite_1.0.1.min.js"></script>
<script type="text/javascript">
$("#jcarousel_1").jCarouselLite({
btnNext: ".btnHolder1 > .nextBtn",
btnPrev: ".btnHolder1 > .prevBtn",
speed: 800,
visible: 4
});
</script>
</body>
</html>
Et voici le site en question : www.y-g-r.com
Si quelqu'un d'érudit à une solution je le bénis!
J'ai acheté un model de site sur template monster, avec une section portfolio à la base créée pour afficher des images avec l'effet fancybox, et j'essaie tant bien que mal d'afficher des vidéos viméo et autre à la place. J'ai tout juste réussi à afficher les players de mes vidéos, mais l'effet fancybox reste absent à l'appel. A préciser que je ne suis ni programmeur, ni graphiste, je n'ai aucune connaissance dans ce domaine :/ Mais je désire apprendre et comprendre afin d'administrer correctement mon site!
Voila le code de toute la page :
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Folio</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
<meta name="description" content="Your description">
<meta name="keywords" content="Your keywords">
<meta name="author" content="Your name">
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/preview.css" type="text/css">
<script type="text/javascript" src="js/include_script.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<link href="css/ie.css" rel="stylesheet" type="text/css">
<![endif]-->
</head>
<body>
<!--content wrapper-->
<div id="wrapper">
<section>
<div class="dynamicContent">
<!--content-->
<div class="row">
<div class="span12 _relative">
<h2>portfolio</h2>
<div id="jcarousel_1">
<ul>
<li>
<a class="iframe" href="https://player.vimeo.com/video/91912482"><span class="_over"></span>
<img class="img-polaroid" src="img/VDT.png" alt="">
</a></li>
<li>
<a class="iframe" href="https://player.vimeo.com/video/91912480">
<span class="_over"></span>
<img class="img-polaroid" src="img/A3sportback.png" alt="">
</a></li>
<li>
<a class="iframe" href="https://player.vimeo.com/video/91912479">
<span class="_over"></span>
<img class="img-polaroid" src="img/Lavitessedupasse.png" alt="">
</a></li>
<li>
<a class="iframe" href="https://player.vimeo.com/video/63856411">
<span class="_over"></span>
<img class="img-polaroid" src="img/thumbnail1.png" alt="">
</a></li>
<li>
<a class="iframe" href="https://player.vimeo.com/video/63856410">
<span class="_over"></span>
<img class="img-polaroid" src="img/thumbnail3.png" alt="">
</a></li>
<li>
<a class="iframe" href="https://player.vimeo.com/video/68436296">
<span class="_over"></span>
<img class="img-polaroid" src="img/thumbnail7.png" alt="">
</a></li>
<li>
<a rel="Appendix" href="https://www.jeuxvideo.com/videos/iframe/111458" class="pic margin6">
<span class="_over"></span>
<img class="img-polaroid" src="img/thumbnail5.png" alt="">
</a></li>
</ul>
</div>
<div class="btnHolder1">
<a href="#" class="nextBtn"><img src="img/sprite_btn_next.png" alt=""></a>
<a href="#" class="prevBtn"><img src="img/sprite_btn_prev.png" alt=""></a>
</div>
</div>
</div>
</div>
</section>
</div>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/jcarousellite_1.0.1.min.js"></script>
<script type="text/javascript">
$("#jcarousel_1").jCarouselLite({
btnNext: ".btnHolder1 > .nextBtn",
btnPrev: ".btnHolder1 > .prevBtn",
speed: 800,
visible: 4
});
</script>
</body>
</html>
Et voici le site en question : www.y-g-r.com
Si quelqu'un d'érudit à une solution je le bénis!
A voir également:
- Problème d'affichage de vidéos vimeo avec l'effet fancybox
- Effet miroir word - Guide
- Gagner de l'argent en regardant des videos tiktok - Accueil - Réseaux sociaux
- Affichage double ecran - Guide
- Problème affichage fenêtre windows 10 - Guide
- Windows 11 affichage classique - Guide
3 réponses
En effet, qu'est ce que tu veux dire par effet Fancybox.. parce que Fancy Box a plusieurs Fonctionnalités.. est ce que tu parle de l'effet que dès en clique sur la photo, la video s'ouvre en Popup interne !?
Oui c'est ça ! voilà le model source de mon site, avec l'effet fancybox fonctionnant sur des photos : http://livedemo00.template-help.com/wt_44753/index-2.html
Voila le code de la page du model source que j'essaie de modifier :
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Folio</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
<meta name="description" content="Your description">
<meta name="keywords" content="Your keywords">
<meta name="author" content="Your name">
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/preview.css" type="text/css">
<script type="text/javascript" src="js/include_script.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<link href="css/ie.css" rel="stylesheet" type="text/css">
<![endif]-->
</head>
<body>
<!--content wrapper-->
<div id="wrapper">
<section>
<div class="dynamicContent">
<!--content-->
<div class="row">
<div class="span12 _relative">
<h2>portfolio</h2>
<div id="jcarousel_1">
<ul>
<li>
<a rel="Appendix" href="img/big_image1.jpg" class="pic margin6">
<span class="_over"></span>
<img class="img-polaroid" src="img/thumbnail1.png" alt="">
</a>
<a rel="Appendix" href="img/big_image5.jpg" class="pic">
<span class="_over"></span>
<img class="img-polaroid" src="img/thumbnail2.png" alt="">
</a>
</li>
<li>
<a rel="Appendix" href="img/big_image2.jpg" class="pic margin6">
<span class="_over"></span>
<img class="img-polaroid" src="img/thumbnail3.png" alt="">
</a>
<a rel="Appendix" href="img/big_image6.jpg" class="pic">
<span class="_over"></span>
<img class="img-polaroid" src="img/thumbnail4.png" alt="">
</a>
</li>
<li>
<a rel="Appendix" href="img/big_image3.jpg" class="pic margin6">
<span class="_over"></span>
<img class="img-polaroid" src="img/thumbnail5.png" alt="">
</a>
<a rel="Appendix" href="img/big_image7.jpg" class="pic">
<span class="_over"></span>
<img class="img-polaroid" src="img/thumbnail6.png" alt="">
</a>
</li>
<li>
<a rel="Appendix" href="img/big_image4.jpg" class="pic margin6">
<span class="_over"></span>
<img class="img-polaroid" src="img/thumbnail7.png" alt="">
</a>
<a rel="Appendix" href="img/big_image8.jpg" class="pic">
<span class="_over"></span>
<img class="img-polaroid" src="img/thumbnail8.png" alt="">
</a>
</li>
</ul>
</div>
<div class="btnHolder1">
<a href="#" class="nextBtn"><img src="img/sprite_btn_next.png" alt=""></a>
<a href="#" class="prevBtn"><img src="img/sprite_btn_prev.png" alt=""></a>
</div>
</div>
</div>
</div>
</section>
</div>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/jcarousellite_1.0.1.min.js"></script>
<script type="text/javascript">
$("#jcarousel_1").jCarouselLite({
btnNext: ".btnHolder1 > .nextBtn",
btnPrev: ".btnHolder1 > .prevBtn",
speed: 800,
visible: 4
});
</script>
</body>
</html>
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Folio</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
<meta name="description" content="Your description">
<meta name="keywords" content="Your keywords">
<meta name="author" content="Your name">
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/preview.css" type="text/css">
<script type="text/javascript" src="js/include_script.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<link href="css/ie.css" rel="stylesheet" type="text/css">
<![endif]-->
</head>
<body>
<!--content wrapper-->
<div id="wrapper">
<section>
<div class="dynamicContent">
<!--content-->
<div class="row">
<div class="span12 _relative">
<h2>portfolio</h2>
<div id="jcarousel_1">
<ul>
<li>
<a rel="Appendix" href="img/big_image1.jpg" class="pic margin6">
<span class="_over"></span>
<img class="img-polaroid" src="img/thumbnail1.png" alt="">
</a>
<a rel="Appendix" href="img/big_image5.jpg" class="pic">
<span class="_over"></span>
<img class="img-polaroid" src="img/thumbnail2.png" alt="">
</a>
</li>
<li>
<a rel="Appendix" href="img/big_image2.jpg" class="pic margin6">
<span class="_over"></span>
<img class="img-polaroid" src="img/thumbnail3.png" alt="">
</a>
<a rel="Appendix" href="img/big_image6.jpg" class="pic">
<span class="_over"></span>
<img class="img-polaroid" src="img/thumbnail4.png" alt="">
</a>
</li>
<li>
<a rel="Appendix" href="img/big_image3.jpg" class="pic margin6">
<span class="_over"></span>
<img class="img-polaroid" src="img/thumbnail5.png" alt="">
</a>
<a rel="Appendix" href="img/big_image7.jpg" class="pic">
<span class="_over"></span>
<img class="img-polaroid" src="img/thumbnail6.png" alt="">
</a>
</li>
<li>
<a rel="Appendix" href="img/big_image4.jpg" class="pic margin6">
<span class="_over"></span>
<img class="img-polaroid" src="img/thumbnail7.png" alt="">
</a>
<a rel="Appendix" href="img/big_image8.jpg" class="pic">
<span class="_over"></span>
<img class="img-polaroid" src="img/thumbnail8.png" alt="">
</a>
</li>
</ul>
</div>
<div class="btnHolder1">
<a href="#" class="nextBtn"><img src="img/sprite_btn_next.png" alt=""></a>
<a href="#" class="prevBtn"><img src="img/sprite_btn_prev.png" alt=""></a>
</div>
</div>
</div>
</div>
</section>
</div>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/jcarousellite_1.0.1.min.js"></script>
<script type="text/javascript">
$("#jcarousel_1").jCarouselLite({
btnNext: ".btnHolder1 > .nextBtn",
btnPrev: ".btnHolder1 > .prevBtn",
speed: 800,
visible: 4
});
</script>
</body>
</html>