jerrry | 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 :
- <div id ="global">
- <div id="scroll">
- <div class="carousel-component" id="html-carousel">
- <div class="carousel-clip-region">
- <ul class="carousel-list">
- <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>
- </ul>
- </div></div></div></div>
|
ici le javascript
Code :
- /*
- * Smoothbox v20080623 by Boris Popoff (http://gueschla.com)
- * To be used with mootools 1.2
- *
- * Based on Cody Lindley's Thickbox, MIT License
- *
- * Licensed under the MIT License:
- * http://www.opensource.org/licenses/mit-license.php
- */
- // on page load call TB_init
- window.addEvent('domready', TB_init);
- // prevent javascript error before the content has loaded
- TB_WIDTH = 0;
- TB_HEIGHT = 0;
- var TB_doneOnce = 0;
- // add smoothbox to href elements that have a class of .smoothbox
- function TB_init(){
- $$("a.smoothbox" ).each(function(el){
- el.onclick = TB_bind
- });
- }
- function TB_bind(event){
- var event = new Event(event);
- // stop default behaviour
- event.preventDefault();
- // remove click border
- this.blur();
- // get caption: either title or name attribute
- var caption = this.title || this.name || "";
- // get rel attribute for image groups
- var group = this.rel || false;
- // display the box for the elements href
- TB_show(caption, this.href, group);
- this.onclick = TB_bind;
- return false;
- }
- // called when the user clicks on a smoothbox link
- function TB_show(caption, url, rel){
- // create iframe, overlay and box if non-existent
-
- if (!$("TB_overlay" )) {
- new Element('iframe').setProperty('id', 'TB_HideSelect').injectInside(document.body);
- $('TB_HideSelect').setOpacity(0);
- new Element('div').setProperty('id', 'TB_overlay').injectInside(document.body);
- $('TB_overlay').setOpacity(0);
- TB_overlaySize();
- new Element('div').setProperty('id', 'TB_load').injectInside(document.body);
- $('TB_load').innerHTML = "<img src='loading.gif' />";
- TB_load_position();
-
- $('TB_overlay').set('tween', {
- duration: 400
- });
- $('TB_overlay').tween('opacity', 0, 0.6);
-
- }
-
- if (!$("TB_load" )) {
- new Element('div').setProperty('id', 'TB_load').injectInside(document.body);
- $('TB_load').innerHTML = "<img src='loading.gif' />";
- TB_load_position();
- }
-
- if (!$("TB_window" )) {
- new Element('div').setProperty('id', 'TB_window').injectInside(document.body);
- $('TB_window').setOpacity(0);
- }
-
- $("TB_overlay" ).onclick = TB_remove;
- window.onscroll = TB_position;
-
- // check if a query string is involved
- var baseURL = url.match(/(.+)?/)[1] || url;
-
- // regex to check if a href refers to an image
- var imageURL = /\.(jpe?g|png|gif|bmp)/gi;
-
- // check for images
- if (baseURL.match(imageURL)) {
- var dummy = {
- caption: "",
- url: "",
- html: ""
- };
-
- var prev = dummy, next = dummy, imageCount = "";
-
- // if an image group is given
- if (rel) {
- function getInfo(image, id, label){
- return {
- caption: image.title,
- url: image.href,
- html: "<span id='TB_" + id + "'> <a href='#'>" + label + "</a></span>"
- }
- }
-
- // find the anchors that point to the group
- var imageGroup = [];
- $$("a.smoothbox" ).each(function(el){
- if (el.rel == rel) {
- imageGroup[imageGroup.length] = el;
- }
- })
-
- var foundSelf = false;
-
- // loop through the anchors, looking for ourself, saving information about previous and next image
- for (var i = 0; i < imageGroup.length; i++) {
- var image = imageGroup[i];
- var urlTypeTemp = image.href.match(imageURL);
-
- // look for ourself
- if (image.href == url) {
- foundSelf = true;
- imageCount = "Image " + (i + 1) + " of " + (imageGroup.length);
- }
- else {
- // when we found ourself, the current is the next image
- if (foundSelf) {
- next = getInfo(image, "next", "Next >" );
- // stop searching
- break;
- }
- else {
- // didn't find ourself yet, so this may be the one before ourself
- prev = getInfo(image, "prev", "< Prev" );
- }
- }
- }
- }
-
- imgPreloader = new Image();
- imgPreloader.onload = function(){
- imgPreloader.onload = null;
-
- // Resizing large images
- var x = window.getWidth() - 150;
- var y = window.getHeight() - 150;
- var imageWidth = imgPreloader.width;
- var imageHeight = imgPreloader.height;
- if (imageWidth > x) {
- imageHeight = imageHeight * (x / imageWidth);
- imageWidth = x;
- if (imageHeight > y) {
- imageWidth = imageWidth * (y / imageHeight);
- imageHeight = y;
- }
- }
- else
- if (imageHeight > y) {
- imageWidth = imageWidth * (y / imageHeight);
- imageHeight = y;
- if (imageWidth > x) {
- imageHeight = imageHeight * (x / imageWidth);
- imageWidth = x;
- }
- }
- // End Resizing
-
- // TODO don't use globals
- TB_WIDTH = imageWidth + 30;
- TB_HEIGHT = imageHeight + 60;
-
- // TODO empty window content instead
- $("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>";
-
- $("TB_closeWindowButton" ).onclick = TB_remove;
-
- function buildClickHandler(image){
- return function(){
- $("TB_window" ).dispose();
- new Element('div').setProperty('id', 'TB_window').injectInside(document.body);
-
- TB_show(image.caption, image.url, rel);
- return false;
- };
- }
- var goPrev = buildClickHandler(prev);
- var goNext = buildClickHandler(next);
- if ($('TB_prev')) {
- $("TB_prev" ).onclick = goPrev;
- }
-
- if ($('TB_next')) {
- $("TB_next" ).onclick = goNext;
- }
-
- document.onkeydown = function(event){
- var event = new Event(event);
- switch (event.code) {
- case 27:
- TB_remove();
- break;
- case 190:
- if ($('TB_next')) {
- document.onkeydown = null;
- goNext();
- }
- break;
- case 188:
- if ($('TB_prev')) {
- document.onkeydown = null;
- goPrev();
- }
- break;
- }
- }
-
- // TODO don't remove loader etc., just hide and show later
- $("TB_ImageOff" ).onclick = TB_remove;
- TB_position();
- TB_showWindow();
- }
- imgPreloader.src = url;
-
- }
- else { //code to show html pages
- var queryString = url.match(/\?(.+)/)[1];
- var params = TB_parseQuery(queryString);
-
- TB_WIDTH = (params['width'] * 1) + 30;
- TB_HEIGHT = (params['height'] * 1) + 40;
-
- var ajaxContentW = TB_WIDTH - 30, ajaxContentH = TB_HEIGHT - 45;
-
- if (url.indexOf('TB_iframe') != -1) {
- urlNoQuery = url.split('TB_');
- $("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>";
- }
- else {
- $("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>";
- }
-
- $("TB_closeWindowButton" ).onclick = TB_remove;
-
- if (url.indexOf('TB_inline') != -1) {
- $("TB_ajaxContent" ).innerHTML = ($(params['inlineId']).innerHTML);
- TB_position();
- TB_showWindow();
- }
- else
- if (url.indexOf('TB_iframe') != -1) {
- TB_position();
- if (frames['TB_iframeContent'] == undefined) {//be nice to safari
- $(document).keyup(function(e){
- var key = e.keyCode;
- if (key == 27) {
- TB_remove()
- }
- });
- TB_showWindow();
- }
- }
- else {
- var handlerFunc = function(){
- TB_position();
- TB_showWindow();
- };
- new Request.HTML({
- method: 'get',
- update: $("TB_ajaxContent" ),
- onComplete: handlerFunc
- }).get(url);
- }
- }
-
- window.onresize = function(){
- TB_position();
- TB_load_position();
- TB_overlaySize();
- }
-
- document.onkeyup = function(event){
- var event = new Event(event);
- if (event.code == 27) { // close
- TB_remove();
- }
- }
-
- }
- //helper functions below
- function TB_showWindow(){
- //$("TB_load" ).dispose();
- //$("TB_window" ).setStyles({display:"block",opacity:'0'});
-
- if (TB_doneOnce == 0) {
- TB_doneOnce = 1;
-
- $('TB_window').set('tween', {
- duration: 250,
- onComplete: function(){
- if ($('TB_load')) {
- $('TB_load').dispose();
- }
- }
- });
- $('TB_window').tween('opacity', 0, 1);
-
- }
- else {
- $('TB_window').setStyle('opacity', 1);
- if ($('TB_load')) {
- $('TB_load').dispose();
- }
- }
- }
- function TB_remove(){
- $("TB_overlay" ).onclick = null;
- document.onkeyup = null;
- document.onkeydown = null;
-
- if ($('TB_imageOff'))
- $("TB_imageOff" ).onclick = null;
- if ($('TB_closeWindowButton'))
- $("TB_closeWindowButton" ).onclick = null;
- if ($('TB_prev')) {
- $("TB_prev" ).onclick = null;
- }
- if ($('TB_next')) {
- $("TB_next" ).onclick = null;
- }
-
-
- $('TB_window').set('tween', {
- duration: 250,
- onComplete: function(){
- $('TB_window').dispose();
- }
- });
- $('TB_window').tween('opacity', 1, 0);
-
-
-
- $('TB_overlay').set('tween', {
- duration: 400,
- onComplete: function(){
- $('TB_overlay').dispose();
- }
- });
- $('TB_overlay').tween('opacity', 0.6, 0);
-
- window.onscroll = null;
- window.onresize = null;
-
- $('TB_HideSelect').dispose();
- TB_init();
- TB_doneOnce = 0;
- return false;
- }
- function TB_position(){
- $('TB_window').set('morph', {
- duration: 75
- });
- $('TB_window').morph({
- width: TB_WIDTH + 'px',
- left: (window.getScrollLeft() + (window.getWidth() - TB_WIDTH) / 2) + 'px',
- top: (window.getScrollTop() + (window.getHeight() - TB_HEIGHT) / 2) + 'px'
- });
- }
- function TB_overlaySize(){
- // we have to set this to 0px before so we can reduce the size / width of the overflow onresize
- $("TB_overlay" ).setStyles({
- "height": '0px',
- "width": '0px'
- });
- $("TB_HideSelect" ).setStyles({
- "height": '0px',
- "width": '0px'
- });
- $("TB_overlay" ).setStyles({
- "height": window.getScrollHeight() + 'px',
- "width": window.getScrollWidth() + 'px'
- });
- $("TB_HideSelect" ).setStyles({
- "height": window.getScrollHeight() + 'px',
- "width": window.getScrollWidth() + 'px'
- });
- }
- function TB_load_position(){
- if ($("TB_load" )) {
- $("TB_load" ).setStyles({
- left: (window.getScrollLeft() + (window.getWidth() - 56) / 2) + 'px',
- top: (window.getScrollTop() + ((window.getHeight() - 20) / 2)) + 'px',
- display: "block"
- });
- }
- }
- function TB_parseQuery(query){
- // return empty object
- if (!query)
- return {};
- var params = {};
-
- // parse query
- var pairs = query.split(/[;&]/);
- for (var i = 0; i < pairs.length; i++) {
- var pair = pairs[i].split('=');
- if (!pair || pair.length != 2)
- continue;
- // unescape both key and value, replace "+" with spaces in value
- params[unescape(pair[0])] = unescape(pair[1]).replace(/\+/g, ' ');
- }
- return params;
- }
|
|