Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
3017 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  aide javascript script mootool+smoothbox

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

aide javascript script mootool+smoothbox

n°1887393
jerrry
Posté le 24-05-2009 à 19:40:21  profilanswer
 

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

mood
Publicité
Posté le 24-05-2009 à 19:40:21  profilanswer
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  aide javascript script mootool+smoothbox

 

Sujets relatifs
Aide pour un ignorantBesoin d'aide pour comprendre un programme et pour faire un programme
Image dans body mailto javascript firefoxImage dans body mailto javascript firefox
[Javascript] zoom sur image : changer le sens d'ouverture du zoom...Besoin d'aide pour un code PHP
[Javascript] Retarder l'appel d'un script externeLien dans javascript
Aide pour architecture J2EE 
Plus de sujets relatifs à : aide javascript script mootool+smoothbox

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.197 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR