I want to load different images to a div, from links

Question

Hiya, very very new to jQuery and surviving on your wonderful tutorials.

I'm working on my portfolio website, and have a list of projects that uses jQuery's load function to load descriptions of each project into a separate div when clicked. Within each description is a set of numeric links, say 1-5, which I want to display relevant images into another separate div when clicked. My problem so far is that I can't reuse the load function because it overwrites it's intiial use, and doesn't seem to want to be echo'd into the php file that holds all my project descriptions.

Is there a way round this?

Answer 1

I'm only guessing because I haven't seen your code, but when you dynamically load content using ajax, any javascript inside the new content will not get executed.

The best way around this would be to use jQuery's live function to target the links inside the newly loaded content which replaces the image src when clicked - there is no need to use load to grab an image. Here is some example code:

Main page javascript (I didn't include the load function)

$('.project').live('click',function(){
 newImg = $(this).attr('data-img');
 $('#content img.projectImg').attr('src', newImg);
})

HTML in loaded content

<div id="content">

<!-- this content was dynamically loaded -->
<img class="projectImg" style="float:right"/>
<ul>
 <li class="project" data-img="project1.jpg">Project 1</li>
 <li class="project" data-img="project2.jpg">Project 2</li>
</ul>

</div>

Answer 2

You can try to use pure JavaScript for doing that, no need of jquery

For example, dynamically changing the image or text:

document.getElementById('Image_tag_ID').src = 'http:\\ bla-bla';
or
document.getElementById('Div_tag_ID').innerHTML = '<h1>Hello</h1>';

Answer 3

Cheers guys, they both work! I'm doing soemthing completely different now though, ran into other problems more aesthetic than code based! Thanks again though.

Answer 4

Hello - I'm back - I'd love some help on the same problem, seems what I thought worked, didn't work.

Here's the site:

www.2605.co.uk/haute

I'm using an ajax script called ajax tabs to load external html pages into an adjacent div named 'work'.

Each of these html pages holds a description of a project, and a number of links. I want these links to load images into yet another div, 'Images' which appears in index.htm

I've tried all your suggestions and can't seem tog et anything to work - I'm sure it's because of ajax's voiding of javascript inside dynamically loaded content, but I just can't get the live function working.

I'd really really really appreciate some help on this, desperate to get my portfolio up and finished before i graduate and need to get my name out there!

Thanks again all,

Patrick