Dynamic Content on first show, not page load

[TheOverbob]

I noticed that when I created a qTip with a content URL, that the AJAX call happened immediately. Not good for what I had in mind (user info tooltips on a forum, so it made lots of AJAX calls right as the page loaded), but I found a way (based on a suggestion from Craig) to make it only happen when the tooltip is actually shown the first time.

Put the URL you wish to load (or some piece of information you will use to generate the URL) in the ALT attribute of the link that will create the tooltip. I tried using a custom attribute, but IE7 choked on it, so I used ALT since it won't affect the behavior of an anchor tag; however, you could use a different attribute (like title).

Use this in the options when you call .qtip()

JS Code

content: {
   text: 'Loading...'
},
api: {
   beforeShow: function() {
      var url = this.elements.target.attr('alt');
      if (url != '') {
         this.loadContent(url);
      }
   },
   onContentLoad: function() {
      this.elements.target.attr('alt', '');
   }
}

[GFEMajor]

Hi this is mostly exact what i want, except i need to load an image async.

Do you have an idea how to realise this?

I have a page with many small images and want to show a tooltip with a larger images in it. but the "big images" should not be loaded with the page. they should load when the tooltip is shown.

can you help me? i'm not very familiar with javascript and ajax

[Craig]

Try this:

JS Code

$('img.little').each(function() {
   var src = $(this).attr('src').replace('_little', '_big');
 
   $(this).qtip({
      content: '<img src="' + src + '" alt="" />'
   });

[GFEMajor]

(22nd July 12:37)Craig Wrote:  Try this:

JS Code

$('img.little').each(function() {
   var src = $(this).attr('src').replace('_little', '_big');
 
   $(this).qtip({
      content: '<img src="' + src + '" alt="" />'
   });

Your code works perferkly, but is there a way to show a "loading" text while the image is loaded? So the user sees that the images is beeing loaded, like in the first example.

[Craig]

Give it's ALT attribute something... apart from that you'll need to hide the image and display something above it, but it's not a native feature unfortunately! qTip2 supports it though, so try there.

[GFEMajor]

Sorry, but i can't find such a feature in qTip2. Can you point it to me?

[Craig]

Sorry I was half asleep when I wrote that response, what I meant by native feature was todo with Loading messages whilst AJAX content loads, but not I re-read you just want to load an image heh.

You could try something like so:

JS Code

$('.selector').qtip({
	content: 'Loading image...',
	events: {
		render: function(event, api) {
			// Might want to check this works cross browser, as some might not fire the 'load' callback under certain circumstances
			$('<img />', { src: 'blah.png' }).bind('load', function() {
				$(this).appendTo( api.elements.content.html('') );
			});
		}
	}
});