aide javascript script mootool+smoothbox

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 :

<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;
}

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

Sujets relatifs:

Leave a Replay

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

Name *

Email *

URL

Message *