Jquery recuperare img da file

[lucavalentino]

Con jquery cerco di recuperare le img dal file getImages che risiede nella cartella ../chapter_06/08_ajax_image_gallery_improved/
Però le immagini non si caricano.

var GALLERY =
{
	container: '#gallery',
	url: '../chapter_06/08_ajax_image_gallery_improved/getImages',
	delay: 5000,

	load: function()
	{
		var _gallery = this;
		jQuery.ajax(
		{
			type:"get", 
			url: '../chapter_06/08_ajax_image_gallery_improved/getImages', 
			beforeSend: function()
			{
				jQuery(_gallery.container)
				.find('img')
				.fadeOut('slow', function()
				{	jQuery(this).remove();	});
			},
			success: function(data)
			{
				var images = data.split('|');
				jQuery.each(images, function()
				{	_gallery.display(this);	});
			},
			complete: function() {
			setTimeout(function()
			{
				_gallery.load();
			},
			_gallery.delay);
			}
		});
	},
	display: function(image_url)
	{
		jQuery('<img></img>')
		.attr('src', '../images/' + image_url)
		.hide()
		.load(function()
		{
			jQuery(this).fadeIn();
		})
		.appendTo('#gallery');
	}
}

jQuery(document).ready(function(){
  GALLERY.load();
});

[lucavalentino]

[QUOTE]Originariamente inviato da lucavalentino
Con jquery cerco di recuperare le img dal file getImages che risiede nella cartella ../chapter_06/08_ajax_image_gallery_improved/
Però le immagini non si caricano.

var GALLERY =
{
	container: '#gallery',
	url: '../chapter_06/08_ajax_image_gallery_improved/getImages',
	delay: 5000,

	load: function()
	{
		var _gallery = this;
		jQuery.ajax(
		{
			type:"get", 
                        url: this.url, 
			beforeSend: function()
			{
				jQuery(_gallery.container)
				.find('img')
				.fadeOut('slow', function()
				{	jQuery(this).remove();	});
			},
			success: function(data)
			{
				var images = data.split('|');
				jQuery.each(images, function()
				{	_gallery.display(this);	});
			},
			complete: function() {
			setTimeout(function()
			{
				_gallery.load();
			},
			_gallery.delay);
			}
		});
	},
	display: function(image_url)
	{
		jQuery('<img></img>')
		.attr('src', '../images/' + image_url)
		.hide()
		.load(function()
		{
			jQuery(this).fadeIn();
		})
		.appendTo('#gallery');
	}
}

jQuery(document).ready(function(){
  GALLERY.load();
});

[/Un errore è quello in rosso.
L'altro dovrebbe essere la versione di Jquery che ho usato.
Con la 1.6 non fa con la 1.4 fa.

Mi chiedo allora le differenze.

[Xinod]

ma non si caricano o non le vedi?
se ispezioni l' elemento ci sono o no?

comunque setti l' src dell' immagine prima di settarne l' onload, che in javascript non e' corretto

vedi differenze con la cache pulita o meno?
browser in uso?

[lucavalentino]

Utilizzando firebug e qundi firefox mi da
data.split is not a function
Perchè

[Xinod]

data non sara' una stringa
cos'e'?

[lucavalentino]

Ho messo il tutto su altervista aggiungendo anche una immagine prima del caricamento dell'immagine.

var GALLERY = {
  container: '#gallery',
  url: 'getImages',
  delay: 5000,
  
  load: function() {
    var _gallery = this;

    jQuery.ajax({ 
      type:"get", 
      url: this.url, 
      beforeSend: function() {
        // fade out and remove the old images
        jQuery(_gallery.container)
          .find('img')
          .fadeOut('slow', function() {
            jQuery(this).remove();
          });
        // add the spinner 
        jQuery('<div></div>')
          .attr('class', 'spinner')
          .hide()
          .appendTo(_gallery.container)
          .fadeTo('slow', 0.6);
      },
      success: function(data){ 
        var images = data.split('|');
        jQuery.each(images, function() {  
          _gallery.display(this);
        });
      },
      complete: function() {
        setTimeout(function() {
          _gallery.load();
        }, _gallery.delay);
        // remove the spinner 
        jQuery('.spinner').fadeOut('slow', function() {
          jQuery(this).remove();
        });
      }
    });
  },
  display: function(image_url) {
    jQuery('<img></img>')
      .attr('src', '../../images/' + image_url)
      .hide()
      .load(function() { 
        jQuery(this).fadeIn();
      })
      .appendTo('#gallery');
  }
}

jQuery(document).ready(function(){
  GALLERY.load();
}); 

Il problema è che l'immagine che indica il caricamento nel mio caso lo spinner si rivisualizza anche dopo che l'immagine sono caricate.