aide javascript script mootool+smoothbox

aide javascript script mootool+smoothbox - HTML/CSS - Programmation

Marsh Posté le 24-05-2009 à 19:40:21    

salut, j'essaye d'utilser le script smoothbox qui utilise MooTools version:"1.2.0"
a l'interieur d'une galerie le script est celui de a http://www.ajaxdaddy.com/demo-ajax-carousel.html
mais rien ne va
je ne sais pas pourquoi peut etre s'agit il d'un problème de DIV,j'en utilise un certain nombre dans ma page html et peut etre ça perturbe le fonctionnement du script ou bien y a til une incompatibilité entre les javascripts de smoothbox et du carrousel???
dans le cas ou le fait d'avoir des différents divs perturberait la marche du script je me dis que peut etre cette ligne n'est pas comprise par le navigateur
this $$("a.smoothbox" ).each(function(el) mzais je ne sais pas par quoi je devrais la remplacer, auriez vous une idée?
 
 
merci de votre aide  
voici le html
 

Code :
  1. <div id ="global">
  2.             <div id="scroll">
  3.                                 <div class="carousel-component" id="html-carousel">
  4.                                                 <div class="carousel-clip-region">
  5.                                                          <ul class="carousel-list">
  6. <li><a href="images/Loft-01.jpg" title="add a caption to title attribute / or leave blank" class="smoothbox" rel="gallery-plants"><img alt="Image1" class="thumb2" src="images/intro_lieux.jpg?1163492051" width="134" />Image 1</a> </li>
  7. </ul>
  8. </div></div></div></div>


 
ici le javascript

Code :
  1. /*
  2. * Smoothbox v20080623 by Boris Popoff (http://gueschla.com)
  3. * To be used with mootools 1.2
  4. *
  5. * Based on Cody Lindley's Thickbox, MIT License
  6. *
  7. * Licensed under the MIT License:
  8. *   http://www.opensource.org/licenses/mit-license.php
  9. */
  10. // on page load call TB_init
  11. window.addEvent('domready', TB_init);
  12. // prevent javascript error before the content has loaded
  13. TB_WIDTH = 0;
  14. TB_HEIGHT = 0;
  15. var TB_doneOnce = 0;
  16. // add smoothbox to href elements that have a class of .smoothbox
  17. function TB_init(){
  18.     $$("a.smoothbox" ).each(function(el){
  19.         el.onclick = TB_bind
  20.     });
  21. }
  22. function TB_bind(event){
  23.     var event = new Event(event);
  24.     // stop default behaviour
  25.     event.preventDefault();
  26.     // remove click border
  27.     this.blur();
  28.     // get caption: either title or name attribute
  29.     var caption = this.title || this.name || "";
  30.     // get rel attribute for image groups
  31.     var group = this.rel || false;
  32.     // display the box for the elements href
  33.     TB_show(caption, this.href, group);
  34.     this.onclick = TB_bind;
  35.     return false;
  36. }
  37. // called when the user clicks on a smoothbox link
  38. function TB_show(caption, url, rel){
  39.     // create iframe, overlay and box if non-existent
  40.  
  41.     if (!$("TB_overlay" )) {
  42.         new Element('iframe').setProperty('id', 'TB_HideSelect').injectInside(document.body);
  43.         $('TB_HideSelect').setOpacity(0);
  44.         new Element('div').setProperty('id', 'TB_overlay').injectInside(document.body);
  45.         $('TB_overlay').setOpacity(0);
  46.         TB_overlaySize();
  47.         new Element('div').setProperty('id', 'TB_load').injectInside(document.body);
  48.         $('TB_load').innerHTML = "<img src='loading.gif' />";
  49.         TB_load_position();
  50.      
  51.         $('TB_overlay').set('tween', {
  52.             duration: 400
  53.         });
  54.         $('TB_overlay').tween('opacity', 0, 0.6);
  55.      
  56.     }
  57.  
  58.     if (!$("TB_load" )) {
  59.         new Element('div').setProperty('id', 'TB_load').injectInside(document.body);
  60.         $('TB_load').innerHTML = "<img src='loading.gif' />";
  61.         TB_load_position();
  62.     }
  63.  
  64.     if (!$("TB_window" )) {
  65.         new Element('div').setProperty('id', 'TB_window').injectInside(document.body);
  66.         $('TB_window').setOpacity(0);
  67.     }
  68.  
  69.     $("TB_overlay" ).onclick = TB_remove;
  70.     window.onscroll = TB_position;
  71.  
  72.     // check if a query string is involved
  73.     var baseURL = url.match(/(.+)?/)[1] || url;
  74.  
  75.     // regex to check if a href refers to an image
  76.     var imageURL = /\.(jpe?g|png|gif|bmp)/gi;
  77.  
  78.     // check for images
  79.     if (baseURL.match(imageURL)) {
  80.         var dummy = {
  81.             caption: "",
  82.             url: "",
  83.             html: ""
  84.         };
  85.      
  86.         var prev = dummy, next = dummy, imageCount = "";
  87.      
  88.         // if an image group is given
  89.         if (rel) {
  90.             function getInfo(image, id, label){
  91.                 return {
  92.                     caption: image.title,
  93.                     url: image.href,
  94.                     html: "<span id='TB_" + id + "'>&nbsp;&nbsp;<a href='#'>" + label + "</a></span>"
  95.                 }
  96.             }
  97.          
  98.             // find the anchors that point to the group
  99.             var imageGroup = [];
  100.             $$("a.smoothbox" ).each(function(el){
  101.                 if (el.rel == rel) {
  102.                     imageGroup[imageGroup.length] = el;
  103.                 }
  104.             })
  105.          
  106.             var foundSelf = false;
  107.          
  108.             // loop through the anchors, looking for ourself, saving information about previous and next image
  109.             for (var i = 0; i < imageGroup.length; i++) {
  110.                 var image = imageGroup[i];
  111.                 var urlTypeTemp = image.href.match(imageURL);
  112.              
  113.                 // look for ourself
  114.                 if (image.href == url) {
  115.                     foundSelf = true;
  116.                     imageCount = "Image " + (i + 1) + " of " + (imageGroup.length);
  117.                 }
  118.                 else {
  119.                     // when we found ourself, the current is the next image
  120.                     if (foundSelf) {
  121.                         next = getInfo(image, "next", "Next &gt;" );
  122.                         // stop searching
  123.                         break;
  124.                     }
  125.                     else {
  126.                         // didn't find ourself yet, so this may be the one before ourself
  127.                         prev = getInfo(image, "prev", "&lt; Prev" );
  128.                     }
  129.                 }
  130.             }
  131.         }
  132.      
  133.         imgPreloader = new Image();
  134.         imgPreloader.onload = function(){
  135.             imgPreloader.onload = null;
  136.          
  137.             // Resizing large images
  138.             var x = window.getWidth() - 150;
  139.             var y = window.getHeight() - 150;
  140.             var imageWidth = imgPreloader.width;
  141.             var imageHeight = imgPreloader.height;
  142.             if (imageWidth > x) {
  143.                 imageHeight = imageHeight * (x / imageWidth);
  144.                 imageWidth = x;
  145.                 if (imageHeight > y) {
  146.                     imageWidth = imageWidth * (y / imageHeight);
  147.                     imageHeight = y;
  148.                 }
  149.             }
  150.             else
  151.                 if (imageHeight > y) {
  152.                     imageWidth = imageWidth * (y / imageHeight);
  153.                     imageHeight = y;
  154.                     if (imageWidth > x) {
  155.                         imageHeight = imageHeight * (x / imageWidth);
  156.                         imageWidth = x;
  157.                     }
  158.                 }
  159.             // End Resizing
  160.          
  161.             // TODO don't use globals
  162.             TB_WIDTH = imageWidth + 30;
  163.             TB_HEIGHT = imageHeight + 60;
  164.          
  165.             // TODO empty window content instead
  166.             $("TB_window" ).innerHTML += "<a href='' id='TB_ImageOff' title='Close'><img id='TB_Image' src='" + url + "' width='" + imageWidth + "' height='" + imageHeight + "' alt='" + caption + "'/></a>" + "<div id='TB_caption'>" + caption + "<div id='TB_secondLine'>" + imageCount + prev.html + next.html + " <a href=\"test.html\">test</a></div></div><div id='TB_closeWindow'><a href='#' id='TB_closeWindowButton' title='Close'>close</a></div>";
  167.          
  168.             $("TB_closeWindowButton" ).onclick = TB_remove;
  169.          
  170.             function buildClickHandler(image){
  171.                 return function(){
  172.                     $("TB_window" ).dispose();
  173.                     new Element('div').setProperty('id', 'TB_window').injectInside(document.body);
  174.                  
  175.                     TB_show(image.caption, image.url, rel);
  176.                     return false;
  177.                 };
  178.             }
  179.             var goPrev = buildClickHandler(prev);
  180.             var goNext = buildClickHandler(next);
  181.             if ($('TB_prev')) {
  182.                 $("TB_prev" ).onclick = goPrev;
  183.             }
  184.          
  185.             if ($('TB_next')) {
  186.                 $("TB_next" ).onclick = goNext;
  187.             }
  188.          
  189.             document.onkeydown = function(event){
  190.                 var event = new Event(event);
  191.                 switch (event.code) {
  192.                     case 27:
  193.                         TB_remove();
  194.                         break;
  195.                     case 190:
  196.                         if ($('TB_next')) {
  197.                             document.onkeydown = null;
  198.                             goNext();
  199.                         }
  200.                         break;
  201.                     case 188:
  202.                         if ($('TB_prev')) {
  203.                             document.onkeydown = null;
  204.                             goPrev();
  205.                         }
  206.                         break;
  207.                 }
  208.             }
  209.          
  210.             // TODO don't remove loader etc., just hide and show later
  211.             $("TB_ImageOff" ).onclick = TB_remove;
  212.             TB_position();
  213.             TB_showWindow();
  214.         }
  215.         imgPreloader.src = url;
  216.      
  217.     }
  218.     else { //code to show html pages
  219.         var queryString = url.match(/\?(.+)/)[1];
  220.         var params = TB_parseQuery(queryString);
  221.      
  222.         TB_WIDTH = (params['width'] * 1) + 30;
  223.         TB_HEIGHT = (params['height'] * 1) + 40;
  224.      
  225.         var ajaxContentW = TB_WIDTH - 30, ajaxContentH = TB_HEIGHT - 45;
  226.      
  227.         if (url.indexOf('TB_iframe') != -1) {
  228.             urlNoQuery = url.split('TB_');
  229.             $("TB_window" ).innerHTML += "<div id='TB_title'><div id='TB_ajaxWindowTitle'>" + caption + "</div><div id='TB_closeAjaxWindow'><a href='#' id='TB_closeWindowButton' title='Close'>close</a></div></div><iframe frameborder='0' hspace='0' src='" + urlNoQuery[0] + "' id='TB_iframeContent' name='TB_iframeContent' style='width:" + (ajaxContentW + 29) + "px;height:" + (ajaxContentH + 17) + "px;' onload='TB_showWindow()'> </iframe>";
  230.         }
  231.         else {
  232.             $("TB_window" ).innerHTML += "<div id='TB_title'><div id='TB_ajaxWindowTitle'>" + caption + "</div><div id='TB_closeAjaxWindow'><a href='#' id='TB_closeWindowButton'>close</a></div></div><div id='TB_ajaxContent' style='width:" + ajaxContentW + "px;height:" + ajaxContentH + "px;'></div>";
  233.         }
  234.      
  235.         $("TB_closeWindowButton" ).onclick = TB_remove;
  236.      
  237.         if (url.indexOf('TB_inline') != -1) {
  238.             $("TB_ajaxContent" ).innerHTML = ($(params['inlineId']).innerHTML);
  239.             TB_position();
  240.             TB_showWindow();
  241.         }
  242.         else
  243.             if (url.indexOf('TB_iframe') != -1) {
  244.                 TB_position();
  245.                 if (frames['TB_iframeContent'] == undefined) {//be nice to safari
  246.                     $(document).keyup(function(e){
  247.                         var key = e.keyCode;
  248.                         if (key == 27) {
  249.                             TB_remove()
  250.                         }
  251.                     });
  252.                     TB_showWindow();
  253.                 }
  254.             }
  255.             else {
  256.                 var handlerFunc = function(){
  257.                     TB_position();
  258.                     TB_showWindow();
  259.                 };
  260.                 new Request.HTML({
  261.                     method: 'get',
  262.                     update: $("TB_ajaxContent" ),
  263.                     onComplete: handlerFunc
  264.                 }).get(url);
  265.             }
  266.     }
  267.  
  268.     window.onresize = function(){
  269.         TB_position();
  270.         TB_load_position();
  271.         TB_overlaySize();
  272.     }
  273.  
  274.     document.onkeyup = function(event){
  275.         var event = new Event(event);
  276.         if (event.code == 27) { // close
  277.             TB_remove();
  278.         }
  279.     }
  280.  
  281. }
  282. //helper functions below
  283. function TB_showWindow(){
  284.     //$("TB_load" ).dispose();
  285.     //$("TB_window" ).setStyles({display:"block",opacity:'0'});
  286.  
  287.     if (TB_doneOnce == 0) {
  288.         TB_doneOnce = 1;
  289.      
  290.         $('TB_window').set('tween', {
  291.             duration: 250,
  292.             onComplete: function(){
  293.                 if ($('TB_load')) {
  294.                     $('TB_load').dispose();
  295.                 }
  296.             }
  297.         });
  298.         $('TB_window').tween('opacity', 0, 1);
  299.      
  300.     }
  301.     else {
  302.         $('TB_window').setStyle('opacity', 1);
  303.         if ($('TB_load')) {
  304.             $('TB_load').dispose();
  305.         }
  306.     }
  307. }
  308. function TB_remove(){
  309.     $("TB_overlay" ).onclick = null;
  310.     document.onkeyup = null;
  311.     document.onkeydown = null;
  312.  
  313.     if ($('TB_imageOff'))
  314.         $("TB_imageOff" ).onclick = null;
  315.     if ($('TB_closeWindowButton'))
  316.         $("TB_closeWindowButton" ).onclick = null;
  317.     if ($('TB_prev')) {
  318.         $("TB_prev" ).onclick = null;
  319.     }
  320.     if ($('TB_next')) {
  321.         $("TB_next" ).onclick = null;
  322.     }
  323.  
  324.  
  325.     $('TB_window').set('tween', {
  326.         duration: 250,
  327.         onComplete: function(){
  328.             $('TB_window').dispose();
  329.         }
  330.     });
  331.     $('TB_window').tween('opacity', 1, 0);
  332.  
  333.  
  334.  
  335.     $('TB_overlay').set('tween', {
  336.         duration: 400,
  337.         onComplete: function(){
  338.             $('TB_overlay').dispose();
  339.         }
  340.     });
  341.     $('TB_overlay').tween('opacity', 0.6, 0);
  342.  
  343.     window.onscroll = null;
  344.     window.onresize = null;
  345.  
  346.     $('TB_HideSelect').dispose();
  347.     TB_init();
  348.     TB_doneOnce = 0;
  349.     return false;
  350. }
  351. function TB_position(){
  352.     $('TB_window').set('morph', {
  353.         duration: 75
  354.     });
  355.     $('TB_window').morph({
  356.         width: TB_WIDTH + 'px',
  357.         left: (window.getScrollLeft() + (window.getWidth() - TB_WIDTH) / 2) + 'px',
  358.         top: (window.getScrollTop() + (window.getHeight() - TB_HEIGHT) / 2) + 'px'
  359.     });
  360. }
  361. function TB_overlaySize(){
  362.     // we have to set this to 0px before so we can reduce the size / width of the overflow onresize
  363.     $("TB_overlay" ).setStyles({
  364.         "height": '0px',
  365.         "width": '0px'
  366.     });
  367.     $("TB_HideSelect" ).setStyles({
  368.         "height": '0px',
  369.         "width": '0px'
  370.     });
  371.     $("TB_overlay" ).setStyles({
  372.         "height": window.getScrollHeight() + 'px',
  373.         "width": window.getScrollWidth() + 'px'
  374.     });
  375.     $("TB_HideSelect" ).setStyles({
  376.         "height": window.getScrollHeight() + 'px',
  377.         "width": window.getScrollWidth() + 'px'
  378.     });
  379. }
  380. function TB_load_position(){
  381.     if ($("TB_load" )) {
  382.         $("TB_load" ).setStyles({
  383.             left: (window.getScrollLeft() + (window.getWidth() - 56) / 2) + 'px',
  384.             top: (window.getScrollTop() + ((window.getHeight() - 20) / 2)) + 'px',
  385.             display: "block"
  386.         });
  387.     }
  388. }
  389. function TB_parseQuery(query){
  390.     // return empty object
  391.     if (!query)
  392.         return {};
  393.     var params = {};
  394.  
  395.     // parse query
  396.     var pairs = query.split(/[;&]/);
  397.     for (var i = 0; i < pairs.length; i++) {
  398.         var pair = pairs[i].split('=');
  399.         if (!pair || pair.length != 2)
  400.             continue;
  401.         // unescape both key and value, replace "+" with spaces in value
  402.         params[unescape(pair[0])] = unescape(pair[1]).replace(/\+/g, ' ');
  403.     }
  404.     return params;
  405. }

Reply

Marsh Posté le 24-05-2009 à 19:40:21   

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed