IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

[AJAX] Ajax et Lightbox


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Futur Membre du Club
    Profil pro
    Inscrit en
    Mai 2005
    Messages
    4
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2005
    Messages : 4
    Par défaut [AJAX] Ajax et Lightbox
    Bonjour à tous,

    Je vais m'expliquer du mieux possible. J'ai mis en place un site plutôt basique pour présenter mes diverses collections. Tout se passait plutôt bien jusqu'à hier soir où j'ai tenté d'insérer une lightbox dans une de mes pages.

    J'avais testé le concept plusieurs fois sur des pages individuelles pour voir un peu ce que ça donnait et j'étais assez content du résultat. Cependant, il y a un petit soucis dans Firefox et IE. En effet, lorsque j'appelle ma page contenant mon image, la page s'affiche mais pas l'image (sur firefox, elle est invisible et sur IE, une box avec une petite croix rouge est quand même présente pour dire qu'il y a bien une image à cet endroit).

    Mon soucis étant que je ne sais pas du tout d'où peux venir le soucis ... peut-être un soucis de css ou dans la code ...

    Je serai vraiment ravi que vous m'aidiez sur le coup (et que je comprennes d'où viens le soucis surtout).

    Voilà le lien vers le site : http://wovscreens.free.fr/collection/index.html

    Pour trouver la page qui bug, il faut aller dans la partie "collection" puis "cellulos".

    La page en elle-même se trouve à cette adresse : http://wovscreens.free.fr/collection/pages/cels.html

    Et maintenant, le code de la partie principale :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
     
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
     
    	<meta name="author" content="Nownow" />
     
    	<meta name="keywords" content="Nownow, Collection, Saint Seiya, cels, cellulos, cellulos, pvc, figures, figure">
     
    	<meta name="description" content="The website of my several collections" />
     
    	<meta name="robots" content="all" />
     
    	<title>Nownow Collection</title>
     
    	<script type="text/javascript"></script>
     
    	<link rel="Shortcut Icon" type="image/x-icon" href="collec" />	
     
    	<link rel="alternate" type="application/rss+xml" title="RSS" href="collec.xml" />
    	<script type="text/javascript">
     
    var loadedobjects=""
    var rootdomain="http://"+window.location.hostname
     
    function ajaxpage(url, containerid){
    var page_request = false
    if (window.XMLHttpRequest) // if Mozilla, Safari etc
    page_request = new XMLHttpRequest()
    else if (window.ActiveXObject){ // if IE
    try {
    page_request = new ActiveXObject("Msxml2.XMLHTTP")
    } 
    catch (e){
    try{
    page_request = new ActiveXObject("Microsoft.XMLHTTP")
    }
    catch (e){}
    }
    }
    else
    return false
    page_request.onreadystatechange=function(){
    loadpage(page_request, containerid)
    }
    page_request.open('GET', url, true)
    page_request.send(null)
    }
     
    function loadpage(page_request, containerid){
    if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
    document.getElementById(containerid).innerHTML=page_request.responseText
    }
     
    </script>
     
        <link href="images/collec2.css" rel="stylesheet" type="text/css" />
     
    </head>
     
    <body id="nownow" onload="javascript:ajaxpage('pages/news.html', 'explanation');">
     
    <div id="container">
      <div id="intro">
    		<div id="pageHeader">
    			<h1><span>Nownow Collection</span></h1>
    			<h2><span>Le plaisir de collectionner</span></h2>
    		</div>
     
    		<div id="quickSummary">
    			<p align="justify" class="p1"><span>Bienvenue sur ce site.<br />
    			  Vous</span> y trouverez l'ensemble de mes diverses collections.</p>
    			<p align="justify" class="p2"><span>En esp&eacute;rant que vous appr&eacute;cierez votre visite.</p>
    	  </div>
     
      </div>
    	<div id="supportingText">
    		<div id="explanation">
     
     
    		</div>
     
    		<div id="footer">
     
    		</div>
     
    	</div>
     
     
    	<div id="linkList">
    		<div id="linkList2">
    			<div id="lselect">
    				<h3 class="select"><span>Select a Design:</span></h3>
    				<ul>
    					<li><a href="javascript:ajaxpage('pages/news.html', 'explanation');" title="News" accesskey="c">News</a></li>
    					<li><a href="javascript:ajaxpage('pages/collec.html', 'explanation');", title="Collection" accesskey="d">Collection</a></li>
    					<li><a href="javascript:ajaxpage('pages/rech.html', 'explanation');" title="Recherches" accesskey="e">Recherches</a></li>
    					<li><a href="javascript:ajaxpage('pages/ventes.html', 'explanation');" title="Ventes" accesskey="f">Ventes</a></li>
    					<li><a href="javascript:ajaxpage('pages/contact.html', 'explanation');" title="Contact" accesskey="g">Contact</a></li>
    				    <li><a href="javascript:ajaxpage('pages/plan.html', 'explanation');" title="Contact" accesskey="h">Plan du site </a></li>
    				</ul>
    			</div>
     
    			<div id="larchives">
    				<h3 class="archives"><span>Archives:</span></h3>
    				<ul>
    					<li><a href="index22e1.html?cssfile=047/047.css&amp;page=20" title="View next set of designs. AccessKey: n" accesskey="n">Ignis the Black </a></li>
    					<li><a href="indexbe10.html?cssfile=047/047.css&amp;page=18" title="View previous set of designs. AccessKey: p" accesskey="p"> Kusugawa Sasara - To Heart 2 </a></li>
    					<li><a href="indexbe10.html?cssfile=047/047.css&amp;page=18" title="View previous set of designs. AccessKey: p" accesskey="p">Clare - Claymore  </a><a href="http://www.mezzoblue.com/zengarden/alldesigns/" title="View every submission to the Zen Garden. AccessKey: w" accesskey="w"></a></li>
    				</ul>
    			</div>
     
    			<div id="lresources">
    				<h3 class="resources"><span>Resources:</span></h3>
    				<ul>
    					<li><a href="047/047.css" title="View the source CSS file for the currently-viewed design, AccessKey: v" accesskey="v"> Fran&ccedil;ais</a></li>					
    					<li><a href="047/047.css" title="View the source CSS file for the currently-viewed design, AccessKey: v" accesskey="v">English</a></li>
    					<li><a href="pages/japanese/japanese.html">日本の</a></li>
    			  </ul>
    			</div>
    		</div>
    	</div>
     
     
    </div>
     
    <div id="extraDiv1"><span></span></div>
    <div id="extraDiv2"><span></span></div>
     
    </body>
     
    </html>
    Voilà la lien vers la page css de la page principale : http://wovscreens.free.fr/collection/images/collec2.css

    Et le code de ma page contenant les images :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    <head>
     
    	<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
     
    	<script src="js/prototype.js" type="text/javascript"></script>
    	<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
    	<script src="js/lightbox.js" type="text/javascript"></script>
     
    <body>
     
    <div id="text">
      <h3><span>Cellulos, dougas </span><span class="p1"></span>et settei </h3>
      <p><a name="top"></a></p>
      <p><a href="#seiya">Saint Seiya</a> - <a href="#gtaste">G-taste</a> - <a href="#beet">Bouken no Beet</a> - <a href="#shurato">Shurato</a> - <a href="#death">Death Note</a> - <a href="#divers">Divers </a></p>
      <p>&nbsp;</p>
      <p><a name="seiya"></a>Saint Seiya Cels</p>
      <p><a href="images/ss1.jpg" rel="lightbox"><img src="images/thb_ss1.jpg" alt="" width="95" height="75" border="0" /></a> <a href="images/ss2.jpg" rel="lightbox"><img src="images/thb_ss2.jpg" alt="" width="95" height="75" border="0" /></a></p>
      <p>Saint Seiya Dougas  </p>
      <p><a href="#top">top</a></p>
      <p><a name="gtaste"></a>G-taste Ceks </p>
      <p><a href="#top">top</a></p>
      <p><a name="beet"></a>Bouken no Beet Dougas et Background</p>
      <p><a href="#top">top</a></p>
      <p><a name="shurato"></a>Shurato Settei</p>
      <p><a href="#top">top</a></p>
      <p><a name="death"></a>Death Note Settei</p>
      <p><a href="#top">top</a></p>
      <p><a name="divers"></a>Divers   </p>
      <p><a href="#top">top</a></p>
    </div>
    </body>
    </html>
    Les fonctions de la lightbox se trouvent ici :

    http://wovscreens.free.fr/collection/pages/js/
    http://wovscreens.free.fr/collection/pages/css/

    Si j'ai oublié quelque chose, n'hésitez pas à me le dire ... merci d'avance pour votre aide

  2. #2
    Futur Membre du Club
    Profil pro
    Inscrit en
    Mai 2005
    Messages
    4
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2005
    Messages : 4
    Par défaut
    J'ai un peu avancé mais je reste bloqué là : l'image s'affiche mais quand on clique dessus, pas de lightbox ... l'image s'ouvre mais dans une autre page ...

    http://wovscreens.free.fr/collection/index2.html

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
     
    	<meta name="author" content="Nownow" />
     
    	<meta name="keywords" content="Nownow, Collection, Saint Seiya, cels, cellulos, cellulos, pvc, figures, figure">
     
    	<meta name="description" content="The website of my several collections" />
     
    	<meta name="robots" content="all" />
     
    	<title>Nownow Collection</title>
     
    	<link rel="Shortcut Icon" type="image/x-icon" href="collec" />	
     
    	<link rel="alternate" type="application/rss+xml" title="RSS" href="collec.xml" />
     
    	<script src="js/load.js" type="text/javascript"></script>
     
    	<link href="images/collec2.css" rel="stylesheet" type="text/css" />
     
    	<script type="text/javascript" src="js/mootools.v1.1.js"></script>
    	<script type="text/javascript" src="js/slimbox.js"></script>
     
    	<link rel="stylesheet" href="slimbox.css" type="text/css" media="screen" />
     
    </head>
     
    <body id="nownow">
     
    <div id="container">
      <div id="intro">
    		<div id="pageHeader">
    			<h1><span>Nownow Collection</span></h1>
    			<h2><span>Le plaisir de collectionner</span></h2>
    		</div>
     
    		<div id="quickSummary">
    			<p align="justify" class="p1"><span>Bienvenue sur ce site.<br />
    			  Vous</span> y trouverez l'ensemble de mes diverses collections.</p>
    			<p align="justify" class="p2"><span>En esp&eacute;rant que vous appr&eacute;cierez votre visite.</span></p>
    	  </div>
     
      </div>
    	<div id="supportingText">
    		<div id="explanation">
    			<br /><a href="pages/images/persos/ss1.jpg" rel="lightbox">
    			<img src="pages/images/persos/thb_ss1.jpg" width="95" height="84" border="0" /></a>		</div>
     
    		<div id="footer">
     
    		</div>
     
    	</div>
     
     
    	<div id="linkList">
    		<div id="linkList2">
    			<div id="lselect">
    				<h3 class="select"><span>Select a Design:</span></h3>
    				<ul>
    					<li><a href="javascript:ajaxpage('pages/news.html', 'explanation');" title="News" accesskey="c">News</a></li>
    					<li><a href="javascript:ajaxpage('pages/collec.html', 'explanation');", title="Collection" accesskey="d">Collection</a></li>
    					<li><a href="javascript:ajaxpage('pages/rech.html', 'explanation');" title="Recherches" accesskey="e">Recherches</a></li>
    					<li><a href="javascript:ajaxpage('pages/ventes.html', 'explanation');" title="Ventes" accesskey="f">Ventes</a></li>
    					<li><a href="javascript:ajaxpage('pages/contact.html', 'explanation');" title="Contact" accesskey="g">Contact</a></li>
    				    <li><a href="javascript:ajaxpage('pages/plan.html', 'explanation');" title="Contact" accesskey="h">Plan du site </a></li>
    				</ul>
    			</div>
     
    			<div id="larchives">
    				<h3 class="archives"><span>Archives:</span></h3>
    				<ul>
    					<li><a href="#" title="" >Ignis the Black </a></li>
    					<li><a href="#" title=""> Kusugawa Sasara - To Heart 2 </a></li>
    					<li><a href="#" title="">Clare - Claymore  </a>/li>
    				</ul>
    			</div>
     
    			<div id="lresources">
    				<h3 class="resources"><span>Resources:</span></h3>
    				<ul>
    					<li><a href="#" title=""> Fran&ccedil;ais</a></li>					
    					<li><a href="pages/japanese/english.html" title="">English</a></li>
    					<li><a href="pages/japanese/japanese.html">日本の</a></li>
    			  </ul>
    			</div>
    		</div>
    	</div>
     
     
    </div>
     
    <div id="extraDiv1"><span></span></div>
    <div id="extraDiv2"><span></span></div>
     
    </body>
     
    </html>
    Pourtant tous mes liens semblent bons, j'ai essayé toute l'après midi, rien à faire ...

  3. #3
    Membre expérimenté
    Inscrit en
    Juillet 2006
    Messages
    253
    Détails du profil
    Informations forums :
    Inscription : Juillet 2006
    Messages : 253
    Par défaut
    Tout tes liens renvoient vers une erreur 404 de Free.

  4. #4
    Membre éclairé Avatar de ttone
    Profil pro
    Inscrit en
    Janvier 2008
    Messages
    589
    Détails du profil
    Informations personnelles :
    Localisation : France, Paris (Île de France)

    Informations forums :
    Inscription : Janvier 2008
    Messages : 589
    Par défaut
    Je ne sais pas quelle erreur tu as vu que tes liens sont 404

    Mais moi mon probleme est que le code marche, seulement j'ai un nom de domaine netim et quand j'utilise l'adresse masque (nomdedomaine.com) ca ne marche pas...

    En revanche ca marche si j'utilise l'adresse réelle :

    exemple : essayez sur le fakir ou les screenshots OpenGL
    http://27sens.com/creations
    http://t.tone.free.fr/27sens.com/creations

    Merci pour votre aide

Discussions similaires

  1. Ajax function vs Lightbox
    Par jimmplan dans le forum jQuery
    Réponses: 2
    Dernier message: 09/04/2009, 22h05
  2. [AJAX] createElement et lightbox
    Par Malarkey dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 19/01/2007, 11h55
  3. [AJAX] Ajax et les accents
    Par nico-pyright(c) dans le forum Général JavaScript
    Réponses: 7
    Dernier message: 09/12/2005, 20h09
  4. [AJAX] Ajax et javascript contenu
    Par zekey dans le forum Général JavaScript
    Réponses: 7
    Dernier message: 30/09/2005, 20h16
  5. [AJAX] AJAX et javascript
    Par spud5351 dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 20/09/2005, 10h16

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo