JavaScript <div> Refresh

JavaScript
1

Hi Everyone,

Before I post my code…
All I really need to know is how to refresh the content of a <div> tag during runtime with JavaScript. I will have “next” and “previous” links on a <div> layer and when they are clicked, my JS function will assign the right ‘src=“”’ to an <img> tag. How can I refresh only the <div> element and not the whole page ?

I guess I could try ‘Lightbox’ if this is too complicated…

Here is an image to make you understand it better :

I have a page with a <div> layer which is hidden when the page is loaded, and then on the main page content, I have some thumbnails of full size images which I generate with php gd.

The code and link of each generated thumbnail on the main page :


<a href="#" onclick="image_show('{$product.img.type1[images_1].name}');" title="View the full size image"><img border="0" src="{$domain}/includes/crop.php?img_name={$product.img.type1[images_1].name}&amp;setw=100&amp;img_type={$product.img.type1[images_1].type}"></a>

Then the JavaScript function named ‘image_show();’ :


<script type="text/javascript">
<!--

function image_show(img_name)
{
	var sw = screen.width;
	var sh = screen.width;
	
	document.getElementById('image_tag').src = '../uploads/' + img_name;
	document.getElementById('image_full').style.width = sw - 25 + 'px';
	document.getElementById('image_full').style.display = "block";
	
	slowly.fade('main');
}

-->
</script>

And atlast the code of the hidden <div> tag which is made visible by the JavaScript function :


<div id="image_full" align="center" style="display:none ; position:absolute ; top:50px ; width:1024px ; z-index:99">

<table cellpadding="0" cellspacing="0">
<tr>
<td>
<div style="background-color:#FFFFFF ; padding:5px">
<img style="border:2px #999999 solid" id="image_tag" src="" alt="Image" /><br/><br/>
<a href="#" onclick="image_hide();" class="textblue_links" title="Close this image.">
<img src="{$domain}/images/buttons/close.gif" border="0" alt="Close" /></a>
</div>
</td>
</tr>
</table>

</div>

Sorry for all the code. It’s all pretty straight forward, and it all works perfectly fine, but I was hoping to implement “next” and “previous” links on the hidden div which is made visible to load the next and previous images in my array. I can set the <img> src but the problem is, how do I refresh the <div> element’s content ?

Thanks in advance for any help!!! It will be majorly appreciated. :smiley:

All the best,
Contrid.

2

You need some Ajax technology to get what you need. Do you know anything about Ajax?

3

Just to make sure we’re understanding you correctly? are you wanting to change the image inside a div when a user fires some event (clicks a button or something)? if that’s what you need, it’s pretty simple.

4

That’s EXACTLY what I need. :wink:

I have ways of doing it…but I’d probably spend like 4 hours to get it to work.
In the meantime, I’ve downloaded and implemented Lightbox, which was incredibly easy, and does exactly what I want it to.

But I still want my own code to work. I’ve come this far with my own code. I’ve even programmed a little fading script which fades the main content encapsulted in a <div> with an ID value ‘main’ (as you can see in the code above).

I you could tell me what your ideas are, I will most definitely appreciate them greatly!

BTW : I’m using Smarty (not sure if that will help somehow)

Thanks for the help guys. :wink:

All the best,
Antonie

5

Antonie, this is very simple… all you need to do is assign an id to the <img> element that you want to change dynamically.
that way, you can get access to the element by doing:
var MyImg = document.getElementById(‘myid’);

at this point, you’ll be able to change the src attribute

MyImg.getAttribute(‘src’) = ‘newpath.gif’;

Hope this helps.

6

Thanks alot.

You’ll see in the first post that the JavaScript already changes the ‘src=“”’ of the <img> tag.

Are you telling me that the new image will automatically show without any other action? Cause I can already change the source. Will the new image load the moment the ‘src=“”’ is changed ?

Best,
Antonie

7

I thought it would. give it a try and if doesn’t work, let me know. I’ll show you another way.

8

you can also get a hold of your images by the image object
document.images[‘myimg’].src = ‘newpath.gif’;

9

This is great…but I have another problem.

I have a smarty var with an array of all the images. The problem is that I don’t know whether there is a next or a previous image…and even if I did know…I wouldn’t know what their filenames are.

I’m trying to create a counter in my ‘.tpl’ file to count 1 digit for each image and then assign that image filename to a var, but it’s tricky.

10

Thanks cbiti, you’ve helped me alot.

Are you familiar with Smarty ?

I have the following code inside a loop named “images_1” :

{assign var=“img[images_1]” value=$product.img.type1[images_1].name}
{$img[images_1]}

…and just before the loop, I have a {counter} that skips 1 digit everytime.

See…all the images are dynamic data from my database and they are assigned to Smarty vars using PHP arrays.

Man…I’m so confused. :frowning:

11

I’m not familiar with Smarty at all. I’m not a PHP guy either :frowning:
but I can help you with JS if you still need more help.

12

Hi there,

I’ve decided to let it rest for now. The site needs to be done in several hours.
I’ll finish the site up with LightBox since it works 100%. I have two sets of different dynamic images, and I can easily assign them to the LightBox using my Smarty {section} loops.

I’ll need to finish up my own little script some time…

Thanks alot for all your help. :wink:

All the best,
Antonie

13

if the images are being stored in a database. we’re talking about a whole different deal here. You need Ajax to communicate with the backend stuff.

14

Yeah…but I already have the PHP array and the Smarty vars ready. I just can’t get it all to fit together. LightBox…here I come. :smiley:

Thanks again.