comment realiser cet effet de lightbox sur mon forum

4 participants

Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu comment realiser cet effet de lightbox sur mon forum

Message par flexi2202 Mer 8 Mai 2013 - 21:37

bonsoir a tous

j ai trouve ceci sur le net

http://artychaud.forumgratuit.lu/h1-test

qui peux m expliquer clairement comment je peux le mettre en place sur mon forum


merci de votre aide


Dernière édition par flexi2202 le Ven 10 Mai 2013 - 16:44, édité 1 fois
avatar

flexi2202
****

Messages : 377
Inscrit(e) le : 05/02/2011

http://la-peche-a-la-perle.forumgratuit.be
flexi2202 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: comment realiser cet effet de lightbox sur mon forum

Message par Offrande Jeu 9 Mai 2013 - 3:00

Bonjour,

Voila un petit tutoriel qui t'apprendras à créer l'effet que tu souhaite sur t'es images.
- Le Tutoriel
- Ce que cela donne

Voila, Voila, tu as juste à suivre les instructions.
Si tu ne les comprend pas, tape sur google "phpbb lightbox" et tu trouvera des forums qui te donnerons plein de tutoriel différents

Bon courage pour la suite,

Tendrement,
Offrande
Offrande

Offrande
*****

Féminin
Messages : 614
Inscrit(e) le : 05/01/2013

http://sciences-occultes.forumactif.com/
Offrande a été remercié(e) par l'auteur de ce sujet.

Résolu Re: comment realiser cet effet de lightbox sur mon forum

Message par flexi2202 Jeu 9 Mai 2013 - 6:25

bonjour
merci pour le lien , mais je recherche l effet comme écrit dans mon post

je me suis rendu sur la page et j ai essayer de traduire la page mais cela me parait être du petit nègre mdrrr ,
je comprends bien les grandes lignes du javascript ou du css , mais ici mes questions c est de savoir ou mettre les codes et comment les intégrer
http://www.twospy.com/galleriffic/

on bloque des fois sur des choses élémentaire ou basique

j ai donc installe le module javascript

mais ensuite je bloque sur cette partie

je dois la mettre ou précisément

Code:

Setup the script references in the header:

<head>
   ...
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript" src="js/jquery.galleriffic.js"></script>

   <!-- Optionally include jquery.history.js for history support -->
   <script type="text/javascript" src="js/jquery.history.js"></script>
   <script type="text/javascript" src="js/jquery.opacityrollover.js"></script>
   ...
</head>
                  


et ceci je dois l integrer ou

Code:

<div id="thumbs">
   <ul class="thumbs noscript">
      <li>
         <a class="thumb" name="optionalCustomIdentifier" href="path/to/slide" title="your image title">
            <img src="path/to/thumbnail" alt="your image title again for graceful degradation" />
         </a>
         <div class="caption">
            (Any html can go here)
         </div>
      </li>
      ... (repeat for every image in the gallery)
   </ul>
</div>
   
ensuite ceci me chifonne aussi ou le placer
Code:

jQuery(document).ready(function($) {
   var gallery = $('#thumbs').galleriffic({
      delay:                    3000, // in milliseconds
      numThumbs:                20, // The number of thumbnails to show page
      preloadAhead:              40, // Set to -1 to preload all images
      enableTopPager:            false,
      enableBottomPager:        true,
      maxPagesToShow:            7,  // The maximum number of pages to display in either the top or bottom pager
      imageContainerSel:        '', // The CSS selector for the element within which the main slideshow image should be rendered
      controlsContainerSel:      '', // The CSS selector for the element within which the slideshow controls should be rendered
      captionContainerSel:      '', // The CSS selector for the element within which the captions should be rendered
      loadingContainerSel:      '', // The CSS selector for the element within which should be shown when an image is loading
      renderSSControls:          true, // Specifies whether the slideshow's Play and Pause links should be rendered
      renderNavControls:        true, // Specifies whether the slideshow's Next and Previous links should be rendered
      playLinkText:              'Play',
      pauseLinkText:            'Pause',
      prevLinkText:              'Previous',
      nextLinkText:              'Next',
      nextPageLinkText:          'Next ›',
      prevPageLinkText:          '‹ Prev',
      enableHistory:            false, // Specifies whether the url's hash and the browser's history cache should update when the current slideshow image changes
      enableKeyboardNavigation:  true, // Specifies whether keyboard navigation is enabled
      autoStart:                false, // Specifies whether the slideshow should be playing or paused when the page first loads
      syncTransitions:          false, // Specifies whether the out and in transitions occur simultaneously or distinctly
      defaultTransitionDuration: 1000, // If using the default transitions, specifies the duration of the transitions
      onSlideChange:            undefined, // accepts a delegate like such: function(prevIndex, nextIndex) { ... }
      onTransitionOut:          undefined, // accepts a delegate like such: function(slide, caption, isSync, callback) { ... }
      onTransitionIn:            undefined, // accepts a delegate like such: function(slide, caption, isSync) { ... }
      onPageTransitionOut:      undefined, // accepts a delegate like such: function(callback) { ... }
      onPageTransitionIn:        undefined, // accepts a delegate like such: function() { ... }
      onImageAdded:              undefined, // accepts a delegate like such: function(imageData, $li) { ... }
      onImageRemoved:            undefined  // accepts a delegate like such: function(imageData, $li) { ... }
   });
});
avatar

flexi2202
****

Messages : 377
Inscrit(e) le : 05/02/2011

http://la-peche-a-la-perle.forumgratuit.be
flexi2202 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: comment realiser cet effet de lightbox sur mon forum

Message par Offrande Jeu 9 Mai 2013 - 19:08

Bonjour,

Le deuxième code est celui que tu devra mettre sur t'as page , sujet ou message.
Le dernier c'est un code Javascript, donc à mettre dans t'es js.

et pour répondre au premier code, il faudrait que tu me dise ou tu souhaite poster cette galerie ? Smile
Offrande

Offrande
*****

Féminin
Messages : 614
Inscrit(e) le : 05/01/2013

http://sciences-occultes.forumactif.com/
Offrande a été remercié(e) par l'auteur de ce sujet.

Résolu Re: comment realiser cet effet de lightbox sur mon forum

Message par flexi2202 Ven 10 Mai 2013 - 4:04

tiens mon message ne passe pas

peut etre trop long , je le coupe en deux
avatar

flexi2202
****

Messages : 377
Inscrit(e) le : 05/02/2011

http://la-peche-a-la-perle.forumgratuit.be
flexi2202 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: comment realiser cet effet de lightbox sur mon forum

Message par flexi2202 Ven 10 Mai 2013 - 4:15

bonjour a tous

je souhaiterais intégrer la galerie de ce lien

http://artychaud.forumgratuit.lu/h1-test

qui a été réaliser a l aide de ceci

http://www.twospy.com/galleriffic/

j ai donc télécharger the compressed, production jQuery 1.9.1 et intégrer a forumgratuit
ensuite j ai télécharger jquery.galleriffic.js que j ai aussi intégrer a forumgratuit

puis j ai ouvert web devellopper sur firefox pour http://artychaud.forumgratuit.lu/h1-test
et tenter de repérer les différents blocs

pour le css
j ai ceci que j ai ajouter a la suite du css sur forumgratuit
et depuis lors mon forum a tout centrer donc y a un soucis la bas aussi apparement
Code:

.noscript { display: none; }

html, body {
   margin:0;
   padding:0;
}
body{
   text-align: center;
   font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
   background-color: #eee;
   color: #444;
   font-size: 75%;
}
a{
   color: #27D;
   text-decoration: none;
}
a:focus, a:hover, a:active {
   text-decoration: underline;
}
p, li {
   line-height: 1.8em;
}
h1, h2 {
   font-family: "Trebuchet MS", Verdana, sans-serif;
   margin: 0 0 10px 0;
   letter-spacing:-1px;
}
h1 {
   padding: 0;
   font-size: 3em;
   color: #333;
}
h2 {
   padding-top: 10px;
   font-size:2em;
}
pre {
   font-size: 1.2em;
   line-height: 1.2em;
   overflow-x: auto;
}
div#page {
   width: 900px;
   background-color: #fff;
   margin: 0 auto;
   text-align: left;
   border-color: #ddd;
   border-style: none solid solid;
   border-width: medium 1px 1px;
}
div#container {
   padding: 20px;
}
div#ads {
   clear: both;
   padding: 12px 0 12px 66px;
}
div#footer {
   clear: both;
   color: #777;
   margin: 0 auto;
   padding: 20px 0 40px;
   text-align: center;
}
div.content {
   /* The display of content is enabled using jQuery so that the slideshow content won't display unless

javascript is enabled. */
   display: none;
   float: right;
   width: 550px;
}
div.content a, div.navigation a {
   text-decoration: none;
   color: #777;
}
div.content a:focus, div.content a:hover, div.content a:active {
   text-decoration: underline;
}
div.controls {
   margin-top: 5px;
   height: 23px;
}
div.controls a {
   padding: 5px;
}
div.ss-controls {
   float: left;
}
div.nav-controls {
   float: right;
}
div.slideshow-container {
   position: relative;
   clear: both;
   height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
}
div.loader {
   position: absolute;
   top: 0;
   left: 0;
   background-image: url('loader.gif');
   background-repeat: no-repeat;
   background-position: center;
   width: 550px;
   height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
}
div.slideshow {

}
div.slideshow span.image-wrapper {
   display: block;
   position: absolute;
   top: 0;
   left: 0;
}
div.slideshow a.advance-link {
   display: block;
   width: 550px;
   height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
   line-height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
   text-align: center;
}
div.slideshow a.advance-link:hover, div.slideshow a.advance-link:active, div.slideshow a.advance-link:visited {
   text-decoration: none;
}
div.slideshow img {
   vertical-align: middle;
   border: 1px solid #ccc;
}
div.download {
   float: right;
}
div.caption-container {
   position: relative;
   clear: left;
   height: 75px;
}
span.image-caption {
   display: block;
   position: absolute;
   width: 550px;
   top: 0;
   left: 0;
}
div.caption {
   padding: 12px;
}
div.image-title {
   font-weight: bold;
   font-size: 1.4em;
}
div.image-desc {
   line-height: 1.3em;
   padding-top: 12px;
}
div.navigation {
   /* The navigation style is set using jQuery so that the javascript specific styles won't be applied unless

javascript is enabled. */
}
ul.thumbs {
   clear: both;
   margin: 0;
   padding: 0;
}
ul.thumbs li {
   float: left;
   padding: 0;
   margin: 5px 10px 5px 0;
   list-style: none;
}
a.thumb {
   padding: 2px;
   display: block;
   border: 1px solid #ccc;
}
ul.thumbs li.selected a.thumb {
   background: #000;
}
a.thumb:focus {
   outline: none;
}
ul.thumbs img {
   border: none;
   display: block;
}
div.pagination {
   clear: both;
}
div.navigation div.top {
   margin-bottom: 12px;
   height: 11px;
}
div.navigation div.bottom {
   margin-top: 12px;
}
div.pagination a, div.pagination span.current, div.pagination span.ellipsis {
   display: block;
   float: left;
   margin-right: 2px;
   padding: 4px 7px 2px 7px;
   border: 1px solid #ccc;
}
div.pagination a:hover {
   background-color: #eee;
   text-decoration: none;
}
div.pagination span.current {
   font-weight: bold;
   background-color: #000;
   border-color: #000;
   color: #fff;
}
div.pagination span.ellipsis {
   border: none;
   padding: 5px 0 3px 2px;
}



ensuite j ai chercher les javascripts

j en ai 4
le premier qui me pose des soucis j en parle plus loin
Code:

document.write('<style>.noscript { display: none; }</style>');

jQuery(document).ready(function($) {
            // We only want these styles applied when javascript is enabled
            $('div.navigation').css({'width' : '300px', 'float' : 'left'});
            $('div.content').css('display', 'block');

            // Initially set opacity on thumbs and add
            // additional styling for hover effect on thumbs
            var onMouseOutOpacity = 0.67;
            $('#thumbs ul.thumbs li').opacityrollover({
               mouseOutOpacity:  onMouseOutOpacity,
               mouseOverOpacity:  1.0,
               fadeSpeed:        'fast',
               exemptionSelector: '.selected'
            });
            
            // Initialize Advanced Galleriffic Gallery
            var gallery = $('#thumbs').galleriffic({
               delay:                    2500,
               numThumbs:                15,
               preloadAhead:              10,
               enableTopPager:            true,
               enableBottomPager:        true,
               maxPagesToShow:            7,
               imageContainerSel:        '#slideshow',
               controlsContainerSel:      '#controls',
               captionContainerSel:      '#caption',
               loadingContainerSel:      '#loading',
               renderSSControls:          true,
               renderNavControls:        true,
               playLinkText:              'Play Slideshow',
               pauseLinkText:            'Pause Slideshow',
               prevLinkText:              '‹ Previous Photo',
               nextLinkText:              'Next Photo ›',
               nextPageLinkText:          'Next ›',
               prevPageLinkText:          '‹ Prev',
               enableHistory:            false,
               autoStart:                false,
               syncTransitions:          true,
               defaultTransitionDuration: 900,
               onSlideChange:            function(prevIndex, nextIndex) {
                  // 'this' refers to the gallery, which is an extension of

$('#thumbs')
                  this.find('ul.thumbs').children()
                     .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
                     .eq(nextIndex).fadeTo('fast', 1.0);
               },
               onPageTransitionOut:      function(callback) {
                  this.fadeTo('fast', 0.0, callback);
               },
               onPageTransitionIn:        function() {
                  this.fadeTo('fast', 1.0);
               }
            });
         });
le deuxieme que j ai integre a forumactif
http://artychaud.forumgratuit.lu/10854.js

le troisieme qui a ete aussi integre

http://artychaud.forumgratuit.lu/12917.js

le quatrieme qui a ete aussi integre

http://artychaud.forumgratuit.lu/11895.js

et donc le code html que j integre dans un sujet de mon forum
Code:

<html><head>
      <title>Test Arty</title>
              <meta http-equiv="content-type" content="text/html; charset=utf-8">

<script type="text/javascript" src="http://la-peche-a-la-perle.forumgratuit.be/18491.js "></script>
<script type="text/javascript" src="http://la-peche-a-la-perle.forumgratuit.be/17895.js "></script>

                              <script type="text/javascript"

src="http://la-peche-a-la-perle.forumgratuit.be/12483.js "></script>
      <script type="text/javascript" src="http://la-peche-a-la-perle.forumgratuit.be/15544.js "></script>
      <script type="text/javascript" src="http://la-peche-a-la-perle.forumgratuit.be/16588.js "></script>
      
      <!-- We only want the thunbnails to display when javascript is disabled -->
      <script type="text/javascript">
         document.write('<style>.noscript { display: none; }</style>');
      </script><style>.noscript { display: none; }</style>

                <style>
html, body {
   margin:0;
   padding:0;
}
body{
   text-align: center;
   font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
   background-color: #eee;
   color: #444;
   font-size: 75%;
}
a{
   color: #27D;
   text-decoration: none;
}
a:focus, a:hover, a:active {
   text-decoration: underline;
}
p, li {
   line-height: 1.8em;
}
h1, h2 {
   font-family: "Trebuchet MS", Verdana, sans-serif;
   margin: 0 0 10px 0;
   letter-spacing:-1px;
}
h1 {
   padding: 0;
   font-size: 3em;
   color: #333;
}
h2 {
   padding-top: 10px;
   font-size:2em;
}
pre {
   font-size: 1.2em;
   line-height: 1.2em;
   overflow-x: auto;
}
div#page {
   width: 900px;
   background-color: #fff;
   margin: 0 auto;
   text-align: left;
   border-color: #ddd;
   border-style: none solid solid;
   border-width: medium 1px 1px;
}
div#container {
   padding: 20px;
}
div#ads {
   clear: both;
   padding: 12px 0 12px 66px;
}
div#footer {
   clear: both;
   color: #777;
   margin: 0 auto;
   padding: 20px 0 40px;
   text-align: center;
}
div.content {
   /* The display of content is enabled using jQuery so that the slideshow content won't display unless

javascript is enabled. */
   display: none;
   float: right;
   width: 550px;
}
div.content a, div.navigation a {
   text-decoration: none;
   color: #777;
}
div.content a:focus, div.content a:hover, div.content a:active {
   text-decoration: underline;
}
div.controls {
   margin-top: 5px;
   height: 23px;
}
div.controls a {
   padding: 5px;
}
div.ss-controls {
   float: left;
}
div.nav-controls {
   float: right;
}
div.slideshow-container {
   position: relative;
   clear: both;
   height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
}
div.loader {
   position: absolute;
   top: 0;
   left: 0;
   background-image: url('loader.gif');
   background-repeat: no-repeat;
   background-position: center;
   width: 550px;
   height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
}
div.slideshow {

}
div.slideshow span.image-wrapper {
   display: block;
   position: absolute;
   top: 0;
   left: 0;
}
div.slideshow a.advance-link {
   display: block;
   width: 550px;
   height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
   line-height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
   text-align: center;
}
div.slideshow a.advance-link:hover, div.slideshow a.advance-link:active, div.slideshow a.advance-link:visited {
   text-decoration: none;
}
div.slideshow img {
   vertical-align: middle;
   border: 1px solid #ccc;
}
div.download {
   float: right;
}
div.caption-container {
   position: relative;
   clear: left;
   height: 75px;
}
span.image-caption {
   display: block;
   position: absolute;
   width: 550px;
   top: 0;
   left: 0;
}
div.caption {
   padding: 12px;
}
div.image-title {
   font-weight: bold;
   font-size: 1.4em;
}
div.image-desc {
   line-height: 1.3em;
   padding-top: 12px;
}
div.navigation {
   /* The navigation style is set using jQuery so that the javascript specific styles won't be applied unless

javascript is enabled. */
}
ul.thumbs {
   clear: both;
   margin: 0;
   padding: 0;
}
ul.thumbs li {
   float: left;
   padding: 0;
   margin: 5px 10px 5px 0;
   list-style: none;
}
a.thumb {
   padding: 2px;
   display: block;
   border: 1px solid #ccc;
}
ul.thumbs li.selected a.thumb {
   background: #000;
}
a.thumb:focus {
   outline: none;
}
ul.thumbs img {
   border: none;
   display: block;
}
div.pagination {
   clear: both;
}
div.navigation div.top {
   margin-bottom: 12px;
   height: 11px;
}
div.navigation div.bottom {
   margin-top: 12px;
}
div.pagination a, div.pagination span.current, div.pagination span.ellipsis {
   display: block;
   float: left;
   margin-right: 2px;
   padding: 4px 7px 2px 7px;
   border: 1px solid #ccc;
}
div.pagination a:hover {
   background-color: #eee;
   text-decoration: none;
}
div.pagination span.current {
   font-weight: bold;
   background-color: #000;
   border-color: #000;
   color: #fff;
}
div.pagination span.ellipsis {
   border: none;
   padding: 5px 0 3px 2px;
}

                </style>
   </head>
   <body>
      <div id="page">
         <div id="container">
            <h1><a href="index.html">Arty pour comment ça marche</a></h1>
            <h2>Galerie simplissime</h2>

            <!-- Start Advanced Gallery Html Containers -->
            <div class="content" id="gallery" style="display: block;">
               <div class="controls" id="controls"><div class="ss-controls"><a title="Play

Slideshow" class="play" href="#play">Play Slideshow</a></div><div class="nav-controls"><a title="‹ Previous Photo"

rel="history" class="prev" href="#24">‹ Previous Photo</a><a title="Next Photo ›" rel="history" class="next"

href="#drop">Next Photo ›</a></div></div>
               <div class="slideshow-container">
                  <div class="loader" id="loading" style="display: none;"></div>
                  <div class="slideshow" id="slideshow"><span class="image-wrapper

current" style="opacity: 1;"><a title="Title #0" href="#drop" rel="history" class="advance-link"> <img

alt="Title #0" src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015.jpg"></a></span></div>
               </div>
               <div class="caption-container" id="caption"><span class="image-caption

current" style="opacity: 1;"><div class="caption">
                        <div class="download">
                           <a

href="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_b.jpg">Download Original</a>
                        </div>
                        <div class="image-title">Title #0</div>
                        <div class="image-desc">Description</div>
                     </div></span></div>
            </div>
            <div class="navigation" id="thumbs" style="width: 300px; float: left; opacity:

1;"><div class="top pagination"><span class="current">1</span><a title="2" href="#16" rel="history">2</a><a

title="Next ›" href="#16" rel="history">Next ›</a></div>
               <ul class="thumbs">
                  <li style="opacity: 1;" class="selected">
                     <a title="Title #0" href="#leaf" class="thumb"

rel="history">
                        <img alt="Title #0"

src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg">
                     </a>
                     
                  </li>

                  <li style="opacity: 0.67;">
                     <a title="Title #1" href="#drop" class="thumb"

rel="history">
                        <img alt="Title #1"

src="http://farm3.static.flickr.com/2404/2538171134_2f77bc00d9_s.jpg">
                     </a>
                     
                  </li>

                  <li style="opacity: 0.67;">
                     <a title="Title #2" href="#bigleaf" class="thumb"

rel="history">
                        <img alt="Title #2"

src="http://farm3.static.flickr.com/2093/2538168854_f75e408156_s.jpg">
                     </a>
                     
                  </li>

                  <li style="opacity: 0.67;">
                     <a title="Title #3" href="#lizard" class="thumb"

rel="history">
                        <img alt="Title #3"

src="http://farm4.static.flickr.com/3153/2538167690_c812461b7b_s.jpg">
                     </a>
                     
                  </li>

                  <li style="opacity: 0.67;">
                     <a title="Title #4" href="#5" class="thumb" rel="history">
                        <img alt="Title #4"

src="http://farm4.static.flickr.com/3150/2538167224_0a6075dd18_s.jpg">
                     </a>
                     
                  </li>

                  <li style="opacity: 0.67;">
                     <a title="Title #5" href="#6" class="thumb" rel="history">
                        <img alt="Title #5"

src="http://farm4.static.flickr.com/3204/2537348699_bfd38bd9fd_s.jpg">
                     </a>
                     
                  </li>

                  <li style="opacity: 0.67;">
                     <a title="Title #6" href="#7" class="thumb" rel="history">
                        <img alt="Title #6"

src="http://farm4.static.flickr.com/3124/2538164582_b9d18f9d1b_s.jpg">
                     </a>
                     
                  </li>

                  <li style="opacity: 0.67;">
                     <a title="Title #7" href="#8" class="thumb" rel="history">
                        <img alt="Title #7"

src="http://farm4.static.flickr.com/3205/2538164270_4369bbdd23_s.jpg">
                     </a>
                     
                  </li>

                  <li style="opacity: 0.67;">
                     <a title="Title #8" href="#9" class="thumb" rel="history">
                        <img alt="Title #8"

src="http://farm4.static.flickr.com/3211/2538163540_c2026243d2_s.jpg">
                     </a>
                     
                  </li>

                  <li style="opacity: 0.67;">
                     <a title="Title #9" href="#10" class="thumb" rel="history">
                        <img alt="Title #9"

src="http://farm3.static.flickr.com/2315/2537343449_f933be8036_s.jpg">
                     </a>
                     
                  </li>

                  <li style="opacity: 0.67;">
                     <a title="Title #10" href="#11" class="thumb" rel="history">
                        <img alt="Title #10"

src="http://farm3.static.flickr.com/2167/2082738157_436d1eb280_s.jpg">
                     </a>
                     
                  </li>

                  <li style="opacity: 0.67;">
                     <a title="Title #11" href="#12" class="thumb" rel="history">
                        <img alt="Title #11"

src="http://farm3.static.flickr.com/2342/2083508720_fa906f685e_s.jpg">
                     </a>
                     
                  </li>

                  <li style="opacity: 0.67;">
                     <a title="Title #12" href="#13" class="thumb" rel="history">
                        <img alt="Title #12"

src="http://farm3.static.flickr.com/2132/2082721339_4b06f6abba_s.jpg">
                     </a>
                     
                  </li>

                  <li style="opacity: 0.67;">
                     <a title="Title #13" href="#14" class="thumb" rel="history">
                        <img alt="Title #13"

src="http://farm3.static.flickr.com/2139/2083503622_5b17f16a60_s.jpg">
                     </a>
                     
                  </li>

                  <li style="opacity: 0.67;">
                     <a title="Title #14" href="#15" class="thumb" rel="history">
                        <img alt="Title #14"

src="http://farm3.static.flickr.com/2041/2083498578_114e117aab_s.jpg">
                     </a>
                     
                  </li>

                  <li style="opacity: 0.67; display: none;">
                     <a title="Title #15" href="#16" class="thumb" rel="history">
                        <img alt="Title #15"

src="http://farm3.static.flickr.com/2149/2082705341_afcdda0663_s.jpg">
                     </a>
                     
                  </li>

                  <li style="opacity: 0.67; display: none;">
                     <a title="Title #16" href="#17" class="thumb" rel="history">
                        <img alt="Title #16"

src="http://farm3.static.flickr.com/2014/2083478274_26775114dc_s.jpg">
                     </a>
                     
                  </li>

                  <li style="opacity: 0.67; display: none;">
                     <a title="Title #17" href="#18" class="thumb" rel="history">
                        <img alt="Title #17"

src="http://farm3.static.flickr.com/2194/2083464534_122e849241_s.jpg">
                     </a>
                     
                  </li>

                  <li style="opacity: 0.67; display: none;">
                     <a title="Title #18" href="#19" class="thumb" rel="history">
                        <img alt="Title #18"

src="http://farm4.static.flickr.com/3127/2538173236_b704e7622e_s.jpg">
                     </a>
                     
                  </li>

                  <li style="opacity: 0.67; display: none;">
                     <a title="Title #19" href="#20" class="thumb" rel="history">
                        <img alt="Title #19"

src="http://farm3.static.flickr.com/2375/2538172432_3343a47341_s.jpg">
                     </a>
                     
                  </li>

                  <li style="opacity: 0.67; display: none;">
                     <a title="Title #20" href="#21" class="thumb" rel="history">
                        <img alt="Title #20"

src="http://farm3.static.flickr.com/2353/2083476642_d00372b96f_s.jpg">
                     </a>
                     
                  </li>

                  <li style="opacity: 0.67; display: none;">
                     <a title="Title #21" href="#22" class="thumb" rel="history">
                        <img alt="Title #21"

src="http://farm3.static.flickr.com/2201/1502907190_7b4a2a0e34_s.jpg">
                     </a>
                     
                  </li>

                  <li style="opacity: 0.67; display: none;">
                     <a title="Title #22" href="#23" class="thumb" rel="history">
                        <img alt="Title #22"

src="http://farm2.static.flickr.com/1116/1380178473_fc640e097a_s.jpg">
                     </a>
                     
                  </li>

                  <li style="opacity: 0.67; display: none;">
                     <a title="Title #23" href="#24" class="thumb" rel="history">
                        <img alt="Title #23"

src="http://farm2.static.flickr.com/1260/930424599_e75865c0d6_s.jpg">
                     </a>
                     
                  </li>
               </ul>
            <div class="bottom pagination"><span class="current">1</span><a title="2" href="#16"

rel="history">2</a><a title="Next ›" href="#16" rel="history">Next ›</a></div></div>
            <div style="clear: both;"></div>
         </div>
      </div>
      <div id="footer">© 2009 Trent Foley</div>
      <script type="text/javascript">
         jQuery(document).ready(function($) {
            // We only want these styles applied when javascript is enabled
            $('div.navigation').css({'width' : '300px', 'float' : 'left'});
            $('div.content').css('display', 'block');

            // Initially set opacity on thumbs and add
            // additional styling for hover effect on thumbs
            var onMouseOutOpacity = 0.67;
            $('#thumbs ul.thumbs li').opacityrollover({
               mouseOutOpacity:  onMouseOutOpacity,
               mouseOverOpacity:  1.0,
               fadeSpeed:        'fast',
               exemptionSelector: '.selected'
            });
            
            // Initialize Advanced Galleriffic Gallery
            var gallery = $('#thumbs').galleriffic({
               delay:                    2500,
               numThumbs:                15,
               preloadAhead:              10,
               enableTopPager:            true,
               enableBottomPager:        true,
               maxPagesToShow:            7,
               imageContainerSel:        '#slideshow',
               controlsContainerSel:      '#controls',
               captionContainerSel:      '#caption',
               loadingContainerSel:      '#loading',
               renderSSControls:          true,
               renderNavControls:        true,
               playLinkText:              'Play Slideshow',
               pauseLinkText:            'Pause Slideshow',
               prevLinkText:              '&amp;lsaquo; Previous Photo',
               nextLinkText:              'Next Photo &amp;rsaquo;',
               nextPageLinkText:          'Next &amp;rsaquo;',
               prevPageLinkText:          '&amp;lsaquo; Prev',
               enableHistory:            false,
               autoStart:                false,
               syncTransitions:          true,
               defaultTransitionDuration: 900,
               onSlideChange:            function(prevIndex, nextIndex) {
                  // 'this' refers to the gallery, which is an extension of

$('#thumbs')
                  this.find('ul.thumbs').children()
                     .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
                     .eq(nextIndex).fadeTo('fast', 1.0);
               },
               onPageTransitionOut:      function(callback) {
                  this.fadeTo('fast', 0.0, callback);
               },
               onPageTransitionIn:        function() {
                  this.fadeTo('fast', 1.0);
               }
            });
         });
      </script>
   
<input type="hidden" id="_ilx_alertShown_" value="falsefalse"><div id="_ilx_updateIcon_"></div></body></html>



Mon soucis est le suivant c est que le premier code est en bas de la page du sujet voir print screen

http://www.hostingpics.net/viewer.php?id=649303ecran2.jpg



et que au lieu d avoir comme sur http://artychaud.forumgratuit.lu/h1-test


j ai ceci et que j ai beau cliquer rien ne se passe en plus
http://www.hostingpics.net/viewer.php?id=753079ecran1.jpg


mais y a quand meme deux choses qui me tracasse ou je dois mettre dans ma page html ceci
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery.galleriffic.js"></script>

alors le pire ou le meilleur de tout , c est que si je fais une copie du code html qui est dans le sujet du forum sur mon forum donc, et que je le sauvegarde en fichier html et que je le lance avec mon explorateur cela fonctionne a merveille


qui peux m aider a resoudre ce soucis , cela fait quelques jours que je passe des nuits blanches pfffff a chercher et comprendre

merci a tous
avatar

flexi2202
****

Messages : 377
Inscrit(e) le : 05/02/2011

http://la-peche-a-la-perle.forumgratuit.be
flexi2202 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: comment realiser cet effet de lightbox sur mon forum

Message par AenigmA Ven 10 Mai 2013 - 9:03

Bonjour,
Si tu mets la totalité du code de http://artychaud.forumgratuit.lu/h1-test dans ta page html après avoir modifié tous les liens par les tiens (bien entendu).

Tu peux mettre ta page dans une iframe de cette façon, en remplaçant le lien par le lien de ta page.

Code:
<IFRAME SRC=   http://artychaud.forumgratuit.lu/h1-test width=940 height=850 frameborder=0 border=0 MARGINWIDTH=0 MARGINHEIGHT=0 SCROLLING=no></IFRAME>

Ton code http://la-peche-a-la-perle.forumgratuit.be/12483.js
Ne correspond pas à http://artychaud.forumgratuit.lu/10854.js

Reprends le correctement et donne moi le lien
AenigmA

AenigmA
Membre actif

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: comment realiser cet effet de lightbox sur mon forum

Message par flexi2202 Ven 10 Mai 2013 - 12:44

bonjour
avant toute chose un grand merci pour l aide , car la j en peux plus , tellement je cherche ...
hier jusque 5h00 encore pffffff
je viens de remplacer les codes javascript par ceux de artychaud en prenant soin de bien vérifier mais rien n y fait le résultat est toujours le même



Code:


        <IFRAME SRC=  http://la-peche-a-la-perle.forumgratuit.be/t38-artichau-dddd#lizard width=940 height=850 frameborder=0 border=0 MARGINWIDTH=0 MARGINHEIGHT=0 SCROLLING=no></IFRAME>

merci de l aide et du soutien
avatar

flexi2202
****

Messages : 377
Inscrit(e) le : 05/02/2011

http://la-peche-a-la-perle.forumgratuit.be
flexi2202 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: comment realiser cet effet de lightbox sur mon forum

Message par AenigmA Ven 10 Mai 2013 - 13:38

Non, on ne peut pas voir sur tes posts, il faut être inscrits.
Il faut que tu mettes tout le code dans une page html, là on pourra voir et t'aider
AenigmA

AenigmA
Membre actif

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: comment realiser cet effet de lightbox sur mon forum

Message par flexi2202 Ven 10 Mai 2013 - 13:50

merci pour la réponse
j ai donc été sur ma page fait code source de la page que j ai exporte dans un hébergeur de fichier thml
voici l adresse
http://code.empreintesduweb.com/3274.html
avatar

flexi2202
****

Messages : 377
Inscrit(e) le : 05/02/2011

http://la-peche-a-la-perle.forumgratuit.be
flexi2202 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: comment realiser cet effet de lightbox sur mon forum

Message par flexi2202 Ven 10 Mai 2013 - 13:54

autrement voici un code pour entrer sur le forum plus facile je pense
******** login
******** mot de passe

Edit modération : login et mot de passe supprimés : ne jamais mettre d'infos personnelles en public


Dernière édition par Chacha le Ven 10 Mai 2013 - 13:58, édité 1 fois (Raison : login et mot de passe supprimés : ne jamais mettre d'infos personnelles en public)
avatar

flexi2202
****

Messages : 377
Inscrit(e) le : 05/02/2011

http://la-peche-a-la-perle.forumgratuit.be
flexi2202 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: comment realiser cet effet de lightbox sur mon forum

Message par Chacha Ven 10 Mai 2013 - 13:59

flexi2202 a écrit:merci pour la réponse
j ai donc été sur ma page fait code source de la page que j ai exporte dans un hébergeur de fichier thml
voici l adresse
http://code.empreintesduweb.com/3274.html
flexi2202 a écrit:autrement voici un code pour entrer sur le forum plus facile je pense
******** login
******** mot de passe

Edit modération : login et mot de passe supprimés : ne jamais mettre d'infos personnelles en public
Bonjour,

Warning Merci d'éviter les double-posts, pensez à cliquer sur le bouton :editer: dans votre dernier message pour y ajouter une information.

Les login et mot de passe ont été supprimés : ne jamais mettre d'infos personnelles en public.


Cordialement.
Chacha

Chacha
Modéractif
Modéractif

Masculin
Messages : 69405
Inscrit(e) le : 21/08/2010

https://forum.forumactif.com/
Chacha a été remercié(e) par l'auteur de ce sujet.

Résolu Re: comment realiser cet effet de lightbox sur mon forum

Message par flexi2202 Ven 10 Mai 2013 - 14:01

merci pour la reponse
je recommence dans un post alors

merci pour la réponse
j ai donc été sur ma page fait code source de la page que j ai exporte dans un hébergeur de fichier thml
voici l adresse
http://code.empreintesduweb.com/3274.html

je t envois un mot de passe et un login par mp plus facile peut etre
avatar

flexi2202
****

Messages : 377
Inscrit(e) le : 05/02/2011

http://la-peche-a-la-perle.forumgratuit.be
flexi2202 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: comment realiser cet effet de lightbox sur mon forum

Message par AenigmA Ven 10 Mai 2013 - 14:02

Alala ces jeunes, ouf merci à Chacha sur ce coup

Tu vas dans ton pa > modules > Gestion des pages HTML

Tu créées une page tu coche non et non
Tu copies ton code dedans (celui que tu as pour le message pas ta page Smile
Tu valides
AenigmA

AenigmA
Membre actif

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: comment realiser cet effet de lightbox sur mon forum

Message par flexi2202 Ven 10 Mai 2013 - 14:12

voici j espère que c est bon
Code:
  <IFRAME SRC=  http://la-peche-a-la-perle.forumgratuit.be/h1-ma-page width=940 height=850 frameborder=0 border=0 MARGINWIDTH=0 MARGINHEIGHT=0 SCROLLING=no></IFRAME>

ah désole les modérateurs , je suis complétement perdu avec tout ces codes et surtout le fait de mes nuits blanches
je suis plus si jeune que ca mdrrrr non plus

alors chose incroyable je suis sous firefox et sur mon forum tout est décale
je viens d ouvrir le lien de ma page dans explorer et la plus de décalage

je tiens quand même a préciser depuis que j ai mis le css de artychaud une partie de mon forum a changer d aspect
comme par exemple les liens des forums qui sont centres
avatar

flexi2202
****

Messages : 377
Inscrit(e) le : 05/02/2011

http://la-peche-a-la-perle.forumgratuit.be
flexi2202 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: comment realiser cet effet de lightbox sur mon forum

Message par AenigmA Ven 10 Mai 2013 - 14:18

On va y arriver va Smile

http://artychaud.forumgratuit.lu/10854.js

Héberge ce code sur une page javascript et donne moi le lien stp
AenigmA

AenigmA
Membre actif

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: comment realiser cet effet de lightbox sur mon forum

Message par flexi2202 Ven 10 Mai 2013 - 14:24

en tout cas un énorme merci pour le dévouement

voici donc le lien

Code:
   http://la-peche-a-la-perle.forumgratuit.be/20612.js
avatar

flexi2202
****

Messages : 377
Inscrit(e) le : 05/02/2011

http://la-peche-a-la-perle.forumgratuit.be
flexi2202 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: comment realiser cet effet de lightbox sur mon forum

Message par AenigmA Ven 10 Mai 2013 - 14:35

Il ne le prend pas celui ci, ni chez moi ... bizarre

Voilà le script de ta page html, tu le mets à la place de l'autre puis tu me donneras le lien.

Code:
<html>
   <head>
      <title>Test Arty</title>
              <meta content="text/html; charset=utf-8" http-equiv="content-type">
                <script type="text/javascript" src="http://artychaud.forumgratuit.lu/10854.js"></script>
      <script type="text/javascript" src="http://la-peche-a-la-perle.forumgratuit.be/15544.js"></script>
      <script type="text/javascript" src="http://la-peche-a-la-perle.forumgratuit.be/16588.js"></script>
      
      <!-- We only want the thunbnails to display when javascript is disabled -->
      <script type="text/javascript">
         document.write('<style>.noscript { display: none; }</style>');
      </script>

                <style>
html, body {
   margin:0;
   padding:0;
}
body{
   text-align: center;
   font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
   background-color: #eee;
   color: #444;
   font-size: 75%;
}
a{
   color: #27D;
   text-decoration: none;
}
a:focus, a:hover, a:active {
   text-decoration: underline;
}
p, li {
   line-height: 1.8em;
}
h1, h2 {
   font-family: "Trebuchet MS", Verdana, sans-serif;
   margin: 0 0 10px 0;
   letter-spacing:-1px;
}
h1 {
   padding: 0;
   font-size: 3em;
   color: #333;
}
h2 {
   padding-top: 10px;
   font-size:2em;
}
pre {
   font-size: 1.2em;
   line-height: 1.2em;
   overflow-x: auto;
}
div#page {
   width: 900px;
   background-color: #fff;
   margin: 0 auto;
   text-align: left;
   border-color: #ddd;
   border-style: none solid solid;
   border-width: medium 1px 1px;
}
div#container {
   padding: 20px;
}
div#ads {
   clear: both;
   padding: 12px 0 12px 66px;
}
div#footer {
   clear: both;
   color: #777;
   margin: 0 auto;
   padding: 20px 0 40px;
   text-align: center;
}
div.content {
   /* The display of content is enabled using jQuery so that the slideshow content won't display unless javascript is enabled. */
   display: none;
   float: right;
   width: 550px;
}
div.content a, div.navigation a {
   text-decoration: none;
   color: #777;
}
div.content a:focus, div.content a:hover, div.content a:active {
   text-decoration: underline;
}
div.controls {
   margin-top: 5px;
   height: 23px;
}
div.controls a {
   padding: 5px;
}
div.ss-controls {
   float: left;
}
div.nav-controls {
   float: right;
}
div.slideshow-container {
   position: relative;
   clear: both;
   height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
}
div.loader {
   position: absolute;
   top: 0;
   left: 0;
   background-image: url('loader.gif');
   background-repeat: no-repeat;
   background-position: center;
   width: 550px;
   height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
}
div.slideshow {

}
div.slideshow span.image-wrapper {
   display: block;
   position: absolute;
   top: 0;
   left: 0;
}
div.slideshow a.advance-link {
   display: block;
   width: 550px;
   height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
   line-height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
   text-align: center;
}
div.slideshow a.advance-link:hover, div.slideshow a.advance-link:active, div.slideshow a.advance-link:visited {
   text-decoration: none;
}
div.slideshow img {
   vertical-align: middle;
   border: 1px solid #ccc;
}
div.download {
   float: right;
}
div.caption-container {
   position: relative;
   clear: left;
   height: 75px;
}
span.image-caption {
   display: block;
   position: absolute;
   width: 550px;
   top: 0;
   left: 0;
}
div.caption {
   padding: 12px;
}
div.image-title {
   font-weight: bold;
   font-size: 1.4em;
}
div.image-desc {
   line-height: 1.3em;
   padding-top: 12px;
}
div.navigation {
   /* The navigation style is set using jQuery so that the javascript specific styles won't be applied unless javascript is enabled. */
}
ul.thumbs {
   clear: both;
   margin: 0;
   padding: 0;
}
ul.thumbs li {
   float: left;
   padding: 0;
   margin: 5px 10px 5px 0;
   list-style: none;
}
a.thumb {
   padding: 2px;
   display: block;
   border: 1px solid #ccc;
}
ul.thumbs li.selected a.thumb {
   background: #000;
}
a.thumb:focus {
   outline: none;
}
ul.thumbs img {
   border: none;
   display: block;
}
div.pagination {
   clear: both;
}
div.navigation div.top {
   margin-bottom: 12px;
   height: 11px;
}
div.navigation div.bottom {
   margin-top: 12px;
}
div.pagination a, div.pagination span.current, div.pagination span.ellipsis {
   display: block;
   float: left;
   margin-right: 2px;
   padding: 4px 7px 2px 7px;
   border: 1px solid #ccc;
}
div.pagination a:hover {
   background-color: #eee;
   text-decoration: none;
}
div.pagination span.current {
   font-weight: bold;
   background-color: #000;
   border-color: #000;
   color: #fff;
}
div.pagination span.ellipsis {
   border: none;
   padding: 5px 0 3px 2px;
}

                </style>
   </head>
   <body>
      <div id="page">
         <div id="container">
            <h1><a href="index.html">Arty pour comment ça marche</a></h1>
            <h2>Galerie simplissime</h2>

            <!-- Start Advanced Gallery Html Containers -->
            <div id="gallery" class="content">
               <div id="controls" class="controls"></div>
               <div class="slideshow-container">
                  <div id="loading" class="loader"></div>
                  <div id="slideshow" class="slideshow"></div>
               </div>
               <div id="caption" class="caption-container"></div>
            </div>
            <div id="thumbs" class="navigation">
               <ul class="thumbs noscript">
                  <li>
                     <a class="thumb" name="leaf" href="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015.jpg" title="Title #0">
                        <img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" alt="Title #0" />
                     </a>
                     <div class="caption">
                        <div class="download">
                           <a href="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_b.jpg">Download Original</a>
                        </div>
                        <div class="image-title">Title #0</div>
                        <div class="image-desc">Description</div>
                     </div>
                  </li>

                  <li>
                     <a class="thumb" name="drop" href="http://farm3.static.flickr.com/2404/2538171134_2f77bc00d9.jpg" title="Title #1">
                        <img src="http://farm3.static.flickr.com/2404/2538171134_2f77bc00d9_s.jpg" alt="Title #1" />
                     </a>
                     <div class="caption">
                        Any html can be placed here ...
                     </div>
                  </li>

                  <li>
                     <a class="thumb" name="bigleaf" href="http://farm3.static.flickr.com/2093/2538168854_f75e408156.jpg" title="Title #2">
                        <img src="http://farm3.static.flickr.com/2093/2538168854_f75e408156_s.jpg" alt="Title #2" />
                     </a>
                     <div class="caption">
                        <div class="download">
                           <a href="http://farm3.static.flickr.com/2093/2538168854_f75e408156_b.jpg">Download Original</a>
                        </div>
                        <div class="image-title">Title #2</div>
                        <div class="image-desc">Description</div>
                     </div>
                  </li>

                  <li>
                     <a class="thumb" name="lizard" href="http://farm4.static.flickr.com/3153/2538167690_c812461b7b.jpg" title="Title #3">
                        <img src="http://farm4.static.flickr.com/3153/2538167690_c812461b7b_s.jpg" alt="Title #3" />
                     </a>
                     <div class="caption">
                        <div class="download">
                           <a href="http://farm4.static.flickr.com/3153/2538167690_c812461b7b_b.jpg">Download Original</a>
                        </div>
                        <div class="image-title">Title #3</div>
                        <div class="image-desc">Description</div>
                     </div>
                  </li>

                  <li>
                     <a class="thumb" href="http://farm4.static.flickr.com/3150/2538167224_0a6075dd18.jpg" title="Title #4">
                        <img src="http://farm4.static.flickr.com/3150/2538167224_0a6075dd18_s.jpg" alt="Title #4" />
                     </a>
                     <div class="caption">
                        <div class="download">
                           <a href="http://farm4.static.flickr.com/3150/2538167224_0a6075dd18_b.jpg">Download Original</a>
                        </div>
                        <div class="image-title">Title #4</div>
                        <div class="image-desc">Description</div>
                     </div>
                  </li>

                  <li>
                     <a class="thumb" href="http://farm4.static.flickr.com/3204/2537348699_bfd38bd9fd.jpg" title="Title #5">
                        <img src="http://farm4.static.flickr.com/3204/2537348699_bfd38bd9fd_s.jpg" alt="Title #5" />
                     </a>
                     <div class="caption">
                        <div class="download">
                           <a href="http://farm4.static.flickr.com/3204/2537348699_bfd38bd9fd_b.jpg">Download Original</a>
                        </div>
                        <div class="image-title">Title #5</div>
                        <div class="image-desc">Description</div>
                     </div>
                  </li>

                  <li>
                     <a class="thumb" href="http://farm4.static.flickr.com/3124/2538164582_b9d18f9d1b.jpg" title="Title #6">
                        <img src="http://farm4.static.flickr.com/3124/2538164582_b9d18f9d1b_s.jpg" alt="Title #6" />
                     </a>
                     <div class="caption">
                        <div class="download">
                           <a href="http://farm4.static.flickr.com/3124/2538164582_b9d18f9d1b_b.jpg">Download Original</a>
                        </div>
                        <div class="image-title">Title #6</div>
                        <div class="image-desc">Description</div>
                     </div>
                  </li>

                  <li>
                     <a class="thumb" href="http://farm4.static.flickr.com/3205/2538164270_4369bbdd23.jpg" title="Title #7">
                        <img src="http://farm4.static.flickr.com/3205/2538164270_4369bbdd23_s.jpg" alt="Title #7" />
                     </a>
                     <div class="caption">
                        <div class="download">
                           <a href="http://farm4.static.flickr.com/3205/2538164270_c7d1646ecf_o.jpg">Download Original</a>
                        </div>
                        <div class="image-title">Title #7</div>
                        <div class="image-desc">Description</div>
                     </div>
                  </li>

                  <li>
                     <a class="thumb" href="http://farm4.static.flickr.com/3211/2538163540_c2026243d2.jpg" title="Title #8">
                        <img src="http://farm4.static.flickr.com/3211/2538163540_c2026243d2_s.jpg" alt="Title #8" />
                     </a>
                     <div class="caption">
                        <div class="download">
                           <a href="http://farm4.static.flickr.com/3211/2538163540_c2026243d2_b.jpg">Download Original</a>
                        </div>
                        <div class="image-title">Title #8</div>
                        <div class="image-desc">Description</div>
                     </div>
                  </li>

                  <li>
                     <a class="thumb" href="http://farm3.static.flickr.com/2315/2537343449_f933be8036.jpg" title="Title #9">
                        <img src="http://farm3.static.flickr.com/2315/2537343449_f933be8036_s.jpg" alt="Title #9" />
                     </a>
                     <div class="caption">
                        <div class="download">
                           <a href="http://farm3.static.flickr.com/2315/2537343449_f933be8036_b.jpg">Download Original</a>
                        </div>
                        <div class="image-title">Title #9</div>
                        <div class="image-desc">Description</div>
                     </div>
                  </li>

                  <li>
                     <a class="thumb" href="http://farm3.static.flickr.com/2167/2082738157_436d1eb280.jpg" title="Title #10">
                        <img src="http://farm3.static.flickr.com/2167/2082738157_436d1eb280_s.jpg" alt="Title #10" />
                     </a>
                     <div class="caption">
                        <div class="download">
                           <a href="http://farm3.static.flickr.com/2167/2082738157_436d1eb280_b.jpg">Download Original</a>
                        </div>
                        <div class="image-title">Title #10</div>
                        <div class="image-desc">Description</div>
                     </div>
                  </li>

                  <li>
                     <a class="thumb" href="http://farm3.static.flickr.com/2342/2083508720_fa906f685e.jpg" title="Title #11">
                        <img src="http://farm3.static.flickr.com/2342/2083508720_fa906f685e_s.jpg" alt="Title #11" />
                     </a>
                     <div class="caption">
                        <div class="download">
                           <a href="http://farm3.static.flickr.com/2342/2083508720_fa906f685e_b.jpg">Download Original</a>
                        </div>
                        <div class="image-title">Title #11</div>
                        <div class="image-desc">Description</div>
                     </div>
                  </li>

                  <li>
                     <a class="thumb" href="http://farm3.static.flickr.com/2132/2082721339_4b06f6abba.jpg" title="Title #12">
                        <img src="http://farm3.static.flickr.com/2132/2082721339_4b06f6abba_s.jpg" alt="Title #12" />
                     </a>
                     <div class="caption">
                        <div class="download">
                           <a href="http://farm3.static.flickr.com/2132/2082721339_4b06f6abba_b.jpg">Download Original</a>
                        </div>
                        <div class="image-title">Title #12</div>
                        <div class="image-desc">Description</div>
                     </div>
                  </li>

                  <li>
                     <a class="thumb" href="http://farm3.static.flickr.com/2139/2083503622_5b17f16a60.jpg" title="Title #13">
                        <img src="http://farm3.static.flickr.com/2139/2083503622_5b17f16a60_s.jpg" alt="Title #13" />
                     </a>
                     <div class="caption">
                        <div class="download">
                           <a href="http://farm3.static.flickr.com/2139/2083503622_5b17f16a60_b.jpg">Download Original</a>
                        </div>
                        <div class="image-title">Title #13</div>
                        <div class="image-desc">Description</div>
                     </div>
                  </li>

                  <li>
                     <a class="thumb" href="http://farm3.static.flickr.com/2041/2083498578_114e117aab.jpg" title="Title #14">
                        <img src="http://farm3.static.flickr.com/2041/2083498578_114e117aab_s.jpg" alt="Title #14" />
                     </a>
                     <div class="caption">
                        <div class="download">
                           <a href="http://farm3.static.flickr.com/2041/2083498578_114e117aab_b.jpg">Download Original</a>
                        </div>
                        <div class="image-title">Title #14</div>
                        <div class="image-desc">Description</div>
                     </div>
                  </li>

                  <li>
                     <a class="thumb" href="http://farm3.static.flickr.com/2149/2082705341_afcdda0663.jpg" title="Title #15">
                        <img src="http://farm3.static.flickr.com/2149/2082705341_afcdda0663_s.jpg" alt="Title #15" />
                     </a>
                     <div class="caption">
                        <div class="download">
                           <a href="http://farm3.static.flickr.com/2149/2082705341_afcdda0663_b.jpg">Download Original</a>
                        </div>
                        <div class="image-title">Title #15</div>
                        <div class="image-desc">Description</div>
                     </div>
                  </li>

                  <li>
                     <a class="thumb" href="http://farm3.static.flickr.com/2014/2083478274_26775114dc.jpg" title="Title #16">
                        <img src="http://farm3.static.flickr.com/2014/2083478274_26775114dc_s.jpg" alt="Title #16" />
                     </a>
                     <div class="caption">
                        <div class="download">
                           <a href="http://farm3.static.flickr.com/2014/2083478274_26775114dc_b.jpg">Download Original</a>
                        </div>
                        <div class="image-title">Title #16</div>
                        <div class="image-desc">Description</div>
                     </div>
                  </li>

                  <li>
                     <a class="thumb" href="http://farm3.static.flickr.com/2194/2083464534_122e849241.jpg" title="Title #17">
                        <img src="http://farm3.static.flickr.com/2194/2083464534_122e849241_s.jpg" alt="Title #17" />
                     </a>
                     <div class="caption">
                        <div class="download">
                           <a href="http://farm3.static.flickr.com/2194/2083464534_122e849241_b.jpg">Download Original</a>
                        </div>
                        <div class="image-title">Title #17</div>
                        <div class="image-desc">Description</div>
                     </div>
                  </li>

                  <li>
                     <a class="thumb" href="http://farm4.static.flickr.com/3127/2538173236_b704e7622e.jpg" title="Title #18">
                        <img src="http://farm4.static.flickr.com/3127/2538173236_b704e7622e_s.jpg" alt="Title #18" />
                     </a>
                     <div class="caption">
                        <div class="download">
                           <a href="http://farm4.static.flickr.com/3127/2538173236_b704e7622e_b.jpg">Download Original</a>
                        </div>
                        <div class="image-title">Title #18</div>
                        <div class="image-desc">Description</div>
                     </div>
                  </li>

                  <li>
                     <a class="thumb" href="http://farm3.static.flickr.com/2375/2538172432_3343a47341.jpg" title="Title #19">
                        <img src="http://farm3.static.flickr.com/2375/2538172432_3343a47341_s.jpg" alt="Title #19" />
                     </a>
                     <div class="caption">
                        <div class="download">
                           <a href="http://farm3.static.flickr.com/2375/2538172432_3343a47341_b.jpg">Download Original</a>
                        </div>
                        <div class="image-title">Title #19</div>
                        <div class="image-desc">Description</div>
                     </div>
                  </li>

                  <li>
                     <a class="thumb" href="http://farm3.static.flickr.com/2353/2083476642_d00372b96f.jpg" title="Title #20">
                        <img src="http://farm3.static.flickr.com/2353/2083476642_d00372b96f_s.jpg" alt="Title #20" />
                     </a>
                     <div class="caption">
                        <div class="download">
                           <a href="http://farm3.static.flickr.com/2353/2083476642_d00372b96f_b.jpg">Download Original</a>
                        </div>
                        <div class="image-title">Title #20</div>
                        <div class="image-desc">Description</div>
                     </div>
                  </li>

                  <li>
                     <a class="thumb" href="http://farm3.static.flickr.com/2201/1502907190_7b4a2a0e34.jpg" title="Title #21">
                        <img src="http://farm3.static.flickr.com/2201/1502907190_7b4a2a0e34_s.jpg" alt="Title #21" />
                     </a>
                     <div class="caption">
                        <div class="download">
                           <a href="http://farm3.static.flickr.com/2201/1502907190_7b4a2a0e34_b.jpg">Download Original</a>
                        </div>
                        <div class="image-title">Title #21</div>
                        <div class="image-desc">Description</div>
                     </div>
                  </li>

                  <li>
                     <a class="thumb" href="http://farm2.static.flickr.com/1116/1380178473_fc640e097a.jpg" title="Title #22">
                        <img src="http://farm2.static.flickr.com/1116/1380178473_fc640e097a_s.jpg" alt="Title #22" />
                     </a>
                     <div class="caption">
                        <div class="download">
                           <a href="http://farm2.static.flickr.com/1116/1380178473_fc640e097a_b.jpg">Download Original</a>
                        </div>
                        <div class="image-title">Title #22</div>
                        <div class="image-desc">Description</div>
                     </div>
                  </li>

                  <li>
                     <a class="thumb" href="http://farm2.static.flickr.com/1260/930424599_e75865c0d6.jpg" title="Title #23">
                        <img src="http://farm2.static.flickr.com/1260/930424599_e75865c0d6_s.jpg" alt="Title #23" />
                     </a>
                     <div class="caption">
                        <div class="download">
                           <a href="http://farm2.static.flickr.com/1260/930424599_e75865c0d6_b.jpg">Download Original</a>
                        </div>
                        <div class="image-title">Title #23</div>
                        <div class="image-desc">Description</div>
                     </div>
                  </li>
               </ul>
            </div>
            <div style="clear: both;"></div>
         </div>
      </div>
      <div id="footer">© 2009 Trent Foley</div>
      <script type="text/javascript">
         jQuery(document).ready(function($) {
            // We only want these styles applied when javascript is enabled
            $('div.navigation').css({'width' : '300px', 'float' : 'left'});
            $('div.content').css('display', 'block');

            // Initially set opacity on thumbs and add
            // additional styling for hover effect on thumbs
            var onMouseOutOpacity = 0.67;
            $('#thumbs ul.thumbs li').opacityrollover({
               mouseOutOpacity:  onMouseOutOpacity,
               mouseOverOpacity:  1.0,
               fadeSpeed:        'fast',
               exemptionSelector: '.selected'
            });
            
            // Initialize Advanced Galleriffic Gallery
            var gallery = $('#thumbs').galleriffic({
               delay:                    2500,
               numThumbs:                15,
               preloadAhead:              10,
               enableTopPager:            true,
               enableBottomPager:        true,
               maxPagesToShow:            7,
               imageContainerSel:        '#slideshow',
               controlsContainerSel:      '#controls',
               captionContainerSel:      '#caption',
               loadingContainerSel:      '#loading',
               renderSSControls:          true,
               renderNavControls:        true,
               playLinkText:              'Play Slideshow',
               pauseLinkText:            'Pause Slideshow',
               prevLinkText:              '‹ Previous Photo',
               nextLinkText:              'Next Photo ›',
               nextPageLinkText:          'Next ›',
               prevPageLinkText:          '‹ Prev',
               enableHistory:            false,
               autoStart:                false,
               syncTransitions:          true,
               defaultTransitionDuration: 900,
               onSlideChange:            function(prevIndex, nextIndex) {
                  // 'this' refers to the gallery, which is an extension of $('#thumbs')
                  this.find('ul.thumbs').children()
                     .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
                     .eq(nextIndex).fadeTo('fast', 1.0);
               },
               onPageTransitionOut:      function(callback) {
                  this.fadeTo('fast', 0.0, callback);
               },
               onPageTransitionIn:        function() {
                  this.fadeTo('fast', 1.0);
               }
            });
         });
      </script>
   </body>
</html>

AenigmA

AenigmA
Membre actif

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: comment realiser cet effet de lightbox sur mon forum

Message par flexi2202 Ven 10 Mai 2013 - 14:49

merci pour la reponse
afin de ne pas faire des bêtises j explique ce que j ai fait avec ce code

j ai donc ouvert sur mon forum un nouveau message et j ai mis le code dedans et ensuite j ai valider le message

résultat le message est presque vide
je n ai plus que le titre et le morceau de code qui traine en bas

ensuite
j ai été dans mon pa > modules > Gestion des pages HTML

j ai créées une page
j ai copier dedans le code donne
j ai valide


et voici donc le lien
Code:

<IFRAME SRC=  http://la-peche-a-la-perle.forumgratuit.be/h2-ma-deuxieme-page width=940 height=850 frameborder=0 border=0 MARGINWIDTH=0 MARGINHEIGHT=0 SCROLLING=no></IFRAME>

j espère que cela va fonctionner
avatar

flexi2202
****

Messages : 377
Inscrit(e) le : 05/02/2011

http://la-peche-a-la-perle.forumgratuit.be
flexi2202 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: comment realiser cet effet de lightbox sur mon forum

Message par AenigmA Ven 10 Mai 2013 - 15:04

Si tu cliques sur l'adresse http://la-peche-a-la-perle.forumgratuit.be/h2-ma-deuxieme-page
Tu vois qu'elle fonctionne ouf

L'iframe fonctionne aussi

<IFRAME SRC= http://la-peche-a-la-perle.forumgratuit.be/h2-ma-deuxieme-page width=940 height=850 frameborder=0 border=0 MARGINWIDTH=0 MARGINHEIGHT=0 SCROLLING=no></IFRAME>

C'est l'iframe que tu mettras dans ton message, et non pas le code entier puisqu'il représente une page

Suis tu jusque là stp ?
AenigmA

AenigmA
Membre actif

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: comment realiser cet effet de lightbox sur mon forum

Message par flexi2202 Ven 10 Mai 2013 - 15:18

merci pour l aide
oui juste lorsque je clique sur les deux liens de ton message j ai bien deux fenêtres qui s ouvre avec enfin le code ouffffffffff
j ai donc fait copier le code source en étant sur une de ces pages
pour ensuite aller le coller dans gestion des pages html .
pour ensuite prendre le lien généré et le mettre entre les balises iframe .
j ai éjecter de mon message tout le code que j avais mis depuis le début
et remplacer par l iframe avec le code genere
il y a bien une iframe qui s affiche mais c est mon site en entier a l intérieur comme es ce possible ?alors que j ai pris le code source du lien de ton dernier message
j y perds mon latin

voici un prin screen
comment realiser cet effet de lightbox sur mon forum Ecran110
avatar

flexi2202
****

Messages : 377
Inscrit(e) le : 05/02/2011

http://la-peche-a-la-perle.forumgratuit.be
flexi2202 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: comment realiser cet effet de lightbox sur mon forum

Message par AenigmA Ven 10 Mai 2013 - 15:27

Moi aussi, car j'essaie en même temps sur mon forum et tout marche.

Je t'envoie un mp
AenigmA

AenigmA
Membre actif

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: comment realiser cet effet de lightbox sur mon forum

Message par flexi2202 Ven 10 Mai 2013 - 15:30

ah ok merci , y a peut etre un conflit avec autre chose mais quoi ...
avatar

flexi2202
****

Messages : 377
Inscrit(e) le : 05/02/2011

http://la-peche-a-la-perle.forumgratuit.be
flexi2202 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: comment realiser cet effet de lightbox sur mon forum

Message par flexi2202 Ven 10 Mai 2013 - 16:44

super tout est régler encore 100000000 fois merci
avatar

flexi2202
****

Messages : 377
Inscrit(e) le : 05/02/2011

http://la-peche-a-la-perle.forumgratuit.be
flexi2202 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum