11540 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Slideshow Javascript ne fonctionne pas sans Internet

Bonjour
Je viens de créer mon premier site en HTML5 et CSS3.
j'y ai inséré un slideshow JQuery FlexSlider,
Celui ci fonctionne tres bien sur mon ordinateur lorsque je suis chez moi et connecté à Internet, mais ne fonctionne plus lorsque je suis a mon travail sans connection internet.

Est ce normal et pourquoi?

Merci de votre aide
Marc

PS: J'ai déja cherché sur le net, sans trouver de réponses
Le javascript est executé côté client, donc si les images sont stocké en local (sur ton ordinateur) il n'y à pas de raison pour que ça ne fonctionne pas correctement.
Modifié par desire (17 Aug 2012 - 17:57)
Bonjour,
Mabal972 a écrit :
Est ce normal et pourquoi?
Sans voir le code, impossible de te répondre.





Quoique desire semble posséder une boule de cristal plus efficace que la mienne...
desire a écrit :
Le javascript est executé côté client, donc si les images sont stocké en local (sur ton ordinateur) il n'y à pas de raison pour que ça ne fonctionne pas correctement.


-Oui les images sont bien stockées en local.

-Je me demandais: est ce que un slide show envoie des requettes sur le net et aurais donc besoin d'une connexion???

-Je veux bien envoyer le code, mais est ce que je peux joindre un fichier ici, ou faut il le copier coller?

- et quel codes envoyer?
HTML?
styles.css ?
flexslider.css ?
jquery.flexslider-min.js ?

merci encore
Marc
Laurie-Anne a écrit :
Bonjour,
Sans voir le code, impossible de te répondre.

Je viens de vérifier encore chez moi, le slide show ne s'affiche pas lorsque je suis hors connexion internet.
Voici le code HTML
Merci beaucoup de votre aide

<!doctype html>
<html lang="fr">
<head>
<!-- Encodage des caracteres Universel-->
<meta charset="utf-8" />

<meta name="keywords" content="mots-clés" />
<meta name="description" content="description" />
<meta name="author" content="auteur">

<!-- C le titre affiché dans l'onglet de ma page-->
<title>Défi Kite Serge</title>

<!-- C le lien vers mon ou mes fichier CSS-->
<link rel="stylesheet" href="styles.css" type="text/css" />


<!-- C le JavaScript ki permet aux anciens navigateur IE de reconnaitre le HTML5-->

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>



<!-- ********************* SlideShow FlexSlider ************************** -->

<!-- FlexSlider pieces -->
<link rel="stylesheet" href="flexslider.css" type="text/css" media="screen" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider-min.js"></script>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">


<!-- Hook up the FlexSlider -->
<script type="text/javascript">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>

<!-- ************* End of SlideShow FlexSlider ************************** -->

</head>
<!-- ============================================= -->
<!-- ============================================= -->


<body>

<div id="wrapper"><!-- #wrapper -->
<!-- ============================================= -->

<header><!-- header -->

<!-- Le même Attribut de Style "class" peut être utilisé plusieurs fois, il sera precedé d'un "." dans le css-->
<div class="titre_defi">
<img src="titres/defi_kitesurf_5d2.png" alt="">
</div>


<!-- ************************ SlideShow FlexSlider ********************** -->

<div class="flexslider">

<ul class="slides">

<li class="slide">
<img src="demo-stuff/11-web.jpg" />
</li>

<li class="slide">
<img src="demo-stuff/22-web.jpg" />
</li>

<li class="slide">
<img src="demo-stuff/44-web.jpg" />
</li>

<li class="slide">
<img src="demo-stuff/55-web.jpg" />
</li>

<li class="slide">
<img src="demo-stuff/66-web.jpg" />
</li>

<li class="slide">
<img src="demo-stuff/77-web.jpg" />
</li>

<li class="slide">
<img src="demo-stuff/99-web.jpg" />
</li>

</ul>

</div>

<!-- ************************ End of SlideShow FlexSlider ********************* -->

</header><!-- end of header -->

<!-- ============================================== -->


<nav><!-- top nav -->
<div class="top_menu">
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Mon Défi Kite</a></li>
<li><a href="#">Mon Parcours</a></li>
<li><a href="#">Sponsors</a></li>
<li><a href="#">Press Book</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Actualités</a></li>
<li><a href="#">Me Soutenir</a></li>
</ul>
</div>
</nav><!-- end of top nav -->

<!-- =============================================== -->
<section id="main"><!-- #main content and sidebar area -->


<section id="content"><!-- #content -->

<article>
<h2><a href="#">De Martinique à Saint Martin en KiteSurf</a></h2>
<p><img src="images/nikon_main_eau_05_web.jpg" alt="" alt="Joli saut Smiley smile " class="alignright" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. <a href="#">Duis sagittis ipsum</a>. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Duo partem graeco repudiare ne, vix cu graeci nostrud blandit. Agam graecis omnesque usu ut, veniam commune ne sit, vide lucilius complectitur at ius.</p>


<a href="images/caribbean-map 010.jpg" target="_blank"><img src="images/caribbean-map-01d_mini_web.jpg"
alt="Les Etapes du Défi Caraïbes" title="Cliquez pour voir le détail du parcours" class="alignleft" /></a>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<p>Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
</article>

<article>
<h2><a href="#">De Martinique à Saint Martin en KiteSurf</a></h2>
<p><img src="images/nikon_main_eau_05_web.jpg" alt="" alt="Joli saut Smiley smile " class="alignright" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. <a href="#">Duis sagittis ipsum</a>. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Duo partem graeco repudiare ne, vix cu graeci nostrud blandit. Agam graecis omnesque usu ut, veniam commune ne sit, vide lucilius complectitur at ius.</p>


<a href="images/caribbean-map 010.jpg" target="_blank"><img src="images/caribbean-map-01d_mini_web.jpg"
alt="Les Etapes du Défi Caraïbes" title="Cliquez pour voir le détail du parcours" class="alignleft" /></a>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<p>Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
</article>


</section><!-- end of #content -->


<aside id="sidebar1"><!-- sidebar1 -->

<h3>Mes Sponsors</h3>
<img src="logos/ad125b.jpg" alt="" /><br /><img src="logos/ad125b.jpg" alt="" /><br /><img src="logos/ad125b.jpg" alt="" /><br /><br />

<h3>Articles Récents</h3>
<ul>
<li><a href="#">Mon Défi Kite</a></li>
<li><a href="#">Mon Parcours Sportif </a></li>
<li><a href="#">Mes Sponsors</a></li>
<li><a href="#">Votre Soutien</a></li>
<li><a href="#">Aider les Jeunes Handicapés</a></li>
<li><a href="#">La Martinique</a></li>
</ul>

<h3>Me Contacter</h3>
<ul>
<li><a href="http://www.facebook.com/serge.occhipinti" target="_blank">Facebook</a></li>
<li><a href="mailto:Serge.Occhipinti0590@orange.fr">Mail</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Twitter</a></li>
</ul>

</aside><!-- end of sidebar1 -->


</section><!-- end of #wrapper content and sidebar-->

<!-- =============================================== -->

<footer>
<section id="footer-area">

<section id="footer-outer-block">
<aside class="footer-segment">
<h4>Friends</h4>
<ul>
<li><a href="#">one linkylink</a></li>
<li><a href="#">two linkylinks</a></li>
<li><a href="#">three linkylinks</a></li>
</ul>
</aside><!-- end of #first footer segment -->

<aside class="footer-segment">
<h4>Awesome Stuff</h4>
<ul>
<li><a href="#">one linkylink</a></li>
<li><a href="#">two linkylinks</a></li>
<li><a href="#">three linkylinks</a></li>
</ul>
</aside><!-- end of #second footer segment -->

<aside class="footer-segment">
<h4>Coolness</h4>
<ul>
<li><a href="#">one linkylink</a></li>
<li><a href="#">two linkylinks</a></li>
<li><a href="#">three linkylinks</a></li>
</ul>
</aside><!-- end of #third footer segment -->

<aside class="footer-segment">
<h4>Blahdyblah</h4>
<p>&copy; 2010 <a href="#">yoursite.com</a> Praesent libero. Sed cursus ante dapibus diam. Sed nisi.</p>
</aside><!-- end of #fourth footer segment -->

</section><!-- end of footer-outer-block -->

</section><!-- end of footer-area -->
</footer>

<li><a href="mailto:Serge">WebConception: "AlizéeProCaraibes" / www.mam</a></li>

</div><!-- #bloc_page -->
</body>
</html>
Modifié par Mabal972 (18 Aug 2012 - 18:23)
<!-- ********************* SlideShow FlexSlider ************************** -->

<!-- FlexSlider pieces -->	
<link rel="stylesheet" href="flexslider.css" type="text/css" media="screen" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider-min.js"></script>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">



Ton slideshow utilise le jquery de google.
Sans connexion internet il risque d'avoir du mal à aller le chercher. Smiley cligne
Modifié par Novembers (18 Aug 2012 - 15:51)
Novembers a écrit :
[code=html]
Ton slideshow utilise le jquery de google.
Sans connexion internet il risque d'avoir du mal à aller le chercher. Smiley cligne

Ha d'accord je comprends mieux maintenant...
Qu'elles sont les solutions?
Installer le JQuery sur mon Ordi?
Novembers a écrit :
Si tu veux pouvoir travailler en local sans internet il te suffit de télécharger Jquery sur le site officiel ( http://docs.jquery.com/Downloading_jQuery ). Puis de le mettre à la source de ton site par exemple, et spécifier le bon chemin dans ton code.

Merci beaucoup de l'aide, cela fonctionne....
Sujet clos
Aller à