Slimbox wont open after ajax request

[Dj-yossi]

Hi

I'm using slimbox and mootols for years and never had a problem.

Here i'm facing something new. I created an HTML page where I change
the content of a DIV box with a Request object from mootools.

The thing is that slimbox will open only after the dom object is
ready. My problem is that the dom change because i do my request after
the dom is ready and then doesnt let slimbox to recognize my "rel"
attributes on the "a" tags.

Is there a way to counter this problem ?

Thanks

[Jairo Ochoa]

I have the same problem.
Links generated in a DIV modified by ajax do not work, images are open on top.



--

2009/7/14 Dj-yossi <djy...@gmail.com>

[Massi]

when you download slimbox there is a folder 'src' with a function that
rescan the page for picture.. I dont check but I think is included in
the compressed js file

this is the code

// AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED)
Slimbox.scanPage = function() {
$$(document.links).filter(function(el) {
return el.rel && el.rel.test(/^lightbox/i);
}).slimbox({/* Put custom options here */}, null, function(el) {
return (this == el) || ((this.rel.length > 8) && (this.rel ==
el.rel));
});
};
window.addEvent("domready", Slimbox.scanPage);

On Jul 14, 5:09 pm, Jairo Ochoa <jairo.oc...@gmail.com> wrote:
> I have the same problem.
> Links generated in a DIV modified by ajax do not work, images are open on
> top.
>
> --
>

> 2009/7/14 Dj-yossi <djyo...@gmail.com>

[Jairo Ochoa]

yes, it is at the end of the file "slimbox.js"

even I did copy this function inside the ajax generated content and it fails

2009/7/14 Massi <mbar...@gmail.com>

[Massi]

what's your error? and try to post a code example and the version you
use I can try to help
what library you use mootools or others??

could be your ajax request or other thing

I used sometimes and all works well

On Jul 14, 7:19 pm, Jairo Ochoa <jairo.oc...@gmail.com> wrote:
> yes, it is at the end of the file "slimbox.js"
>
> even I did copy this function inside the ajax generated content and it fails
>

> 2009/7/14 Massi <mbaril...@gmail.com>

[Dj-yossi]

Well for my part, here is the code. On my index.php page, i have three
divs. The one i'm modifying is <div id="main"></div>.

function mainDisplay(page) {
new Request({
url: "/php/"+page+".php",
onRequest : function(){
$('main').set('html', '<img src="../img/ajax-loader.gif"
id="loader" />');
},
onSuccess: function(txt){
$('main').set('html', txt);
},
onFailure: function(){
$('main').set('text', 'The request failed.');
}
}
).send();
}
This code insert the code of the requested url into the div tag. So
the content appears on page only after dom of index.php is ready and
loaded.

Here are the inclusion of mootools and slimbox script.

<script src="global/mootools/mootools-1.2.1-core-comp.js"></script>
<script src="global/mootools/mootools-1.2.1-core-more.js"></script>
<script src="global/slimbox/js/slimbox.js"></script>

Bugzilla's console doesnt show any error. Firefox just opens the
linked image in a new page :
<a href="/img/001-2.jpg" rel="lightbox">
<img src="../img/thumbs/001-2.jpg">
</a>

If you find somehting, thanks in advance

[Jairo Ochoa]

this is the site

http://www.enxebredecoracion.com/catalogo.asp?subcategoria=2

the images are opened if you click on any of them

now click on any of the light blue links

the image gallery at the bottom is changed by ajax

since no image opens - slimbox fails

note that there is a onclick="return false" to avoid these new images to be opened on top
onclick="return false" also cancels imagees to be opened while page is not 100% loaded
(maybe it could fail with ie6, but it works with firefox, opera, safari, camino, ...)

thanks!

2009/7/15 Massi <mbar...@gmail.com>

[Massi]

I think all two dont use 'evalResponse' that make the response
parsable by the script
and you have to use the Slimbox.scanPage on event onSuccess

I use the code of Dj-yossy beacause is the same and I make a little of
changes (let's see):
window.addEvent('domready', function() {
elementsForAjax = $$('a.ajax'); // use selectors for getting the
elements that is used to load ajax (in this case I get all 'a'
elements that have class 'ajax'
elementsForAjax.addEvent('click', function (e) {
e.stop(); // prevent event continue (as click on link)
new Request.HTML({
url: el.getProperty('href'),
evalResponse: true, // this is very important because with this
the new DOM is evaluated and can be parsed by javascript

onRequest : function(){
$('main').set('html', '<img src="../img/ajax-loader.gif"
id="loader" />');
},

onSuccess: function(responseTree, responseElements,
responseHTML, responseJavaScript){
$('main').set('html', responseHTML);
Slimbox.scanPage; // the slimbox rescanning method

},
onFailure: function(){
$('main').set('text', 'The request failed.');
}
}).send();

});
});

I think all shall work :)
have a nice day..

On Jul 15, 2:48 pm, Jairo Ochoa <jairo.oc...@gmail.com> wrote:
> this is the site
>
> http://www.enxebredecoracion.com/catalogo.asp?subcategoria=2
>
> the images are opened if you click on any of them
>
> now click on any of the light blue links
>
> the image gallery at the bottom is changed by ajax
>
> since no image opens - slimbox fails
>

> note that there is a *onclick="return false"* to avoid these new images to

> be opened on top
> onclick="return false" also cancels imagees to be opened while page is not
> 100% loaded
> (maybe it could fail with ie6, but it works with firefox, opera, safari,
> camino, ...)
>
> thanks!
>

> 2009/7/15 Massi <mbaril...@gmail.com>

[Massi]

ops I made some error on script this is the corrected js:

window.addEvent('domready', function() {
elementsForAjax = $$('a.ajax'); // use selectors for getting the
elements that is used to load ajax (in this case I get all 'a'
elements that have class 'ajax'

elementsForAjax.each(function(element) {

element.addEvent('click', function (e) {

e.stop(); // prevent event continue (as click on link)
new Request.HTML({

url: element.getProperty('href'),

evalResponse: true, // this is very important because with
this the new DOM is evaluated and can be parsed by javascript
onRequest : function(){
$('main').set('html', '<img src="../img/ajax-loader.gif"
id="loader" />');
},
onSuccess: function(responseTree, responseElements,
responseHTML, responseJavaScript){
$('main').set('html', responseHTML);
Slimbox.scanPage; // the slimbox rescanning method
},
onFailure: function(){
$('main').set('text', 'The request failed.');
}
}).send();
});
});

});

[Dj-yossi]

Very good Idea... didnt think about it...

I'm gonna try right now and tell you if somehting goes better.

Thanks

[Dj-yossi]

Hi, it still doesnt work...

My question, the mootools.js must be included in Index.php or the
requested page ?

[Jairo Ochoa]

I did included the js at the end of slimbox.js and fails
I also tried to put it inside the page which is called from the ajax and fails

have you test it succesfully at any web site?
please say the url and I check teh code

thanks!
--

2009/7/16 Dj-yossi <djy...@gmail.com>

[Massimo Barilari]

ok.. let me make an example page.. I'll post as soon as possible

2009/7/16 Jairo Ochoa <jairo...@gmail.com>

--
Massimo Barilari

[Massi]

ok for me this code works well
I used mootools 1.2.1 uncompressed
and slimbox 1.69
with this you can try by yourself ^^

have a nice day :)

Start---------------index.htm--------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<script language="javascript" type="text/javascript"
src="mootools-1.2.1-core-nc.js"></script>
<script language="javascript" type="text/javascript"
src="slimbox.js"></script>
<link rel="stylesheet" type="text/css" href="css/slimbox.css">
</head>
<body>
<style media="screen">
#sasasa { border:1px solid #000; }
</style>
<script type="text/javascript">
window.addEvent('domready', function () {
$('sasasa').getElements('a').each(function(el) {
el.addEvents({
'click': function(e){
e.stop(); // preventing event click otherwise go on href
proprierties page
var a, id_gallery; //a is not important;
a = el.getProperty('id').split('_');
id_gallery = a[1];
var myRequest = new Request.HTML({
url: 'gallery.htm?coleccion=' + id_gallery,
method: 'get',

evalResponse: true, // this is very important because with this
the new DOM is evaluated and can be parsed by javascript

onSuccess: function(responseText,responseXML, responseHTML) {
$('loading').set('html', responseHTML+'ok');
Slimbox.scanPage();
},
onRequest: function() {
$('loading').set('html', '<p class="load"><span>Cargando
im&aacute;genes</span></p>');
},
onFailure: function (aa) {
$('loading').set('html', $('loading').get('html') + 'failure');
}
}).send();
}
});
});
});
</script>
<h3>Colecciones</h3>
<ul id="sasasa">
<li><a href="gallery.htm" id="gallery_29">aaaaaaa</a></li>
<li><a href="gallery.htm" id="gallery_30">bbbbbbbbb</a></li>
<li><a href="gallery.htm" id="gallery_32">ccccccccccc</a></li>
<li><a href="gallery.htm" id="gallery_34">ddddddddd</a></li>
<li><a href="gallery.htm" id="gallery_33">eeeeeeeeeee</a></li>
<li><a href="gallery.htm" id="gallery_31">fffffffff</a></li>
</ul>

<div id="loading">
<div id="gallery">
<h3>Galería de artículos</h3>
<a href="images/123_b.jpg" rel="lightbox[galeria]"><img
src="images/123.jpg" /></a>
<a href="images/456_b.jpg" rel="lightbox[galeria]"><img
src="images/456.jpg" /></a>
<a href="images/789_b.jpg" rel="lightbox[galeria]"><img
src="images/789.jpg" /></a>
<a href="images/146_b.jpg" rel="lightbox[galeria]"><img
src="images/146.jpg"></a>
<a href="images/169_b.jpg" rel="lightbox[galeria]"><img
src="images/169.jpg" /></a>
</div>
</div>

</body>
</html>
End----------------index.htm--------------------------

Start---------------gallery.htm------------------------
<div id="gallery">
<h3>title</h3>
<a href="images/123_b.jpg" rel="lightbox[galeria]"><img src="images/
123.jpg" /></a>

<a href="images/789_b.jpg" rel="lightbox[galeria]"><img src="images/
789.jpg" /></a>

</div>
End ---------------gallery.htm------------------------

On Jul 17, 9:42 am, Massimo Barilari <mbaril...@gmail.com> wrote:
> ok.. let me make an example page.. I'll post as soon as possible
>

> 2009/7/16 Jairo Ochoa <jairo.oc...@gmail.com>

>
>
>
> > I did included the js at the end of slimbox.js and fails
> > I also tried to put it inside the page which is called from the ajax and
> > fails
>
> > have you test it succesfully at any web site?
> > please say the url and I check teh code
>
> > thanks!
> > --
>

> > 2009/7/16 Dj-yossi <djyo...@gmail.com>

[Jairo Ochoa]

It did not worked :-(
I'll check it again

--

Jairo Ochoa
e: jairo...@gmail.com

2009/7/17 Massi <mbar...@gmail.com>

[Jairo Ochoa]

I got it!
It was so easy, I only had to add this "Slimbox.scanPage();" here ...

if (ajax.status == 200) {
  pageTracker._trackPageview("/gallery.asp?coleccion="+coleccion);
  Slimbox.scanPage();
}

http://www.enxebredecoracion.com/catalogo.asp?subcategoria=2

--

Jairo Ochoa

2009/7/23 Jairo Ochoa <jairo...@gmail.com>