Show div onclick img

Hi all

Please have a look a site below
http://www.media-graphics.co.uk/test/black/black.html

There is currently a hidden div called fullsize in the content which i have hidden by putting display:none in the css on that div. But I need to get that div to display when a user clicks on a thumbnail from the horizontal scrolling gallery.

I have been trying to get it to work for about 3 hours but can’t see what it is.

Please can anyone help
Thanks in advance

This code needs to be executed to show your “fullsize” DIV:


document.getElementById('fullsize').style.display = 'block';

I just ran that code in Firebug and your DIV showed right up. Here’s how to attach it to the onclick even of another element:


document.getElementById('id_of_image_in_slider').onclick = function() {
	document.getElementById('fullsize').style.display = 'block';
}

Another thing that might be happening is, JavaScript [sometimes] can’t show stuff that has been hidden with CSS. Hide it with JavaScript like this:


<div id="fullsize">
</div>
<script type="text/javascript">
document.getElementById('fullsize').style.display = 'none';
</script>

NOTE: If you place the SCRIPT tag directly after the DIV like I did above, you will avoid the “flash” effect of the fullsize DIV not geting hidden until the entire DOM loads.

Hi

Can you have another look please i have added the above code but the fullsize div doesn’t seem to be coming up when i click the thumb. Do you have any idea why this is.

Thanks

I see that you are now hiding fullsize using JavaScript instead of CSS so that’s good. What I don’t see is any code that tells the DIV to show up onclick.

I am usually a strong proponent of not mixing HTML with JS, but let’s get you going here:

Add this function somewhere:


function show_fullsize() {
	document.getElementById('fullsize').style.display = 'block';
}

Now call the function from the HREF attribute in your slider images (all of them):


<a href="javascript:show_fullsize()"><img src="images/res-thumb.jpg" alt="Sea Turtle" /></a>

EDIT: Now I see your onclick attribute on the first image.

Hi

Still no look here ive added it in but it still won;t work i have noticed that the source generated looks slightly different to how the gallery works. Here is the code so you can see:

I have added the function in the head


<ul id="slideshow">
		<li>
			<h3>TinySlideshow v1</h3>
			<span>photos/orange-fish.jpg</span>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
			<a href="javascript:show_fullsize()"><img  src="images/res-thumb.jpg" alt="Orange Fish" /></a>
		</li>
		<li>
			<h3>Sea Turtle</h3>
			<span>photos/sea-turtle.jpg</span>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
			<a href=""><img src="images/res-thumb.jpg" alt="Sea Turtle" /></a>
		</li>
		<li>
			<h3>Red Coral</h3>
			<span>photos/red-coral.jpg</span>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
			<a href="#"><img src="images/res-thumb.jpg" alt="Red Coral" /></a>
		</li>
		<li>
			<h3>Coral Reef</h3>
			<span>photos/coral-reef.jpg</span>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
			<a href="#"><img src="images/res-thumb.jpg" alt="Coral Reef" /></a>
		</li>
		<li>
			<h3>Blue Fish</h3>
			<span>photos/blue-fish.jpg</span>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
			<a href=""><img src="images/res-thumb.jpg" alt="Blue Fish" /></a>
		</li>
		<li>
			<h3>TinySlideshow v.2</h3>
			<span>photos/yellow-fish.jpg</span>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
			<a href="#"><img src="images/res-thumb.jpg" alt="Yellow Fish" /></a>
		</li>
		<li>
			<h3>Squid</h3>
			<span>photos/squid.jpg</span>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
			<a href="#"><img src="images/res-thumb.jpg" alt="Squid" /></a>
		</li>
		<li>
			<h3>Small Fish</h3>
			<span>photos/small-fish.jpg</span>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
			<a href="#" ><img src="images/res-thumb.jpg" alt="Small Fish" /></a>
		</li>
	</ul>
	<div id="wrapper">
	<div id="thumbnails">
			<div id="slideleft" title="Slide Left"></div>
			<div id="slidearea">
	
				<div id="slider"></div>
			</div>
			<div id="slideright" title="Slide Right"></div>
		</div>
		<br clear="all" />
		


		<div  id="fullsize">
			<div id="imgprev" class="imgnav" title="Previous Image"></div>
			<div id="imglink"></div>
			<div id="imgnext" class="imgnav" title="Next Image"></div>
			<div id="image"></div>
			<div id="information">
				<h3></h3>
				<p></p>
			</div>
		</div>
<script type="text/javascript">
document.getElementById('fullsize').style.display = 'none';
</script>

		
	</div>
<script type="text/javascript" src="compressed.js"></script>
<script type="text/javascript">
	$('slideshow').style.display='none';
	$('wrapper').style.display='block';
	var slideshow=new TINY.slideshow("slideshow");
	window.onload=function(){
		slideshow.auto=true;
		slideshow.speed=5;
		slideshow.link="linkhover";
		slideshow.info="information";
		slideshow.thumbs="slider";
		slideshow.left="slideleft";
		slideshow.right="slideright";
		slideshow.scrollSpeed=4;
		slideshow.spacing=5;
		slideshow.active="#fff";
		slideshow.init("slideshow","image","imgprev","imgnext","imglink");
	}
</script>

Yes, that’s how the markup looks, but the slider JS is taking off all of your A tags, so anything you put there won’t work. I don’t know how your slider JS works, but try attaching the event to the IMG tag and not the A tag:

<img src=“images/res-thumb.jpg” alt=“Sea Turtle” onclick=“show_fullsize();” />

By the way, I don’t see the show_fullsize function in the source anywhere. Is it in compressed.js or something?

hi again

I have just done that and it is showing up in the img in firebug but still doesnt seem to be displaying the div.

Really sorry to be a pain

no the function is in the head i can see it in firebug refresh

Try getting rid of the function altogether and putting the code straight into the onclick attr:

<img src=“images/res-thumb.jpg” alt=“Sea Turtle” onclick="document.getElementById(‘fullsize’).style.display = ‘block’;
" />

Whew, that’s ugly but it works.

Im still getting nothing any idea

Okay, what I think is happening is, the slideshow script is overwriting the onclick event somehow. Try adding changing this:


slideshow.init("slideshow","image","imgprev","imgnext","imglink");

To this:


slideshow.init("slideshow","image","imgprev","imgnext","imglink");

/// Assign events to slider images

// Retrieve an array of all image elements that the slideshow script has placed into the 'slider' element
var slider_images = $$('img', $('slider'));

// Loop through the array of images
for (x in slider_images) {

	// Onclick ...
	slider_images[x].onclick = function() {
	
		// ... display the 'fullsize' element
		$('fullsize').style.display = 'block';
	};
}

You can take out the onclick stuff altogether.

do i just add this in the head

No. Add this:

 
/// Assign events to slider images
 
// Retrieve an array of all image elements that the slideshow script has placed into the 'slider' element
var slider_images = $$('img', $('slider'));
 
// Loop through the array of images
for (x in slider_images) {
 
    // Onclick ...
    slider_images[x].onclick = function() {
   
        // ... display the 'fullsize' element
        $('fullsize').style.display = 'block';
    };
}

… after this:


slideshow.init("slideshow","image","imgprev","imgnext","imglink");

Hi

Thanks for that I really apprecite it. Although it seems to be doing something strange with the allignment of the first image it displays now where it never did before.

Any ideas
thanks again

Its only on the first image because when the next image in the gallery appears it corrects itself

Hi Mattalex,

would you know if it would be possible to get the thumbnails on the gallery i have used to display a lightbox instead of using that div below because i think it may be a bit messy to have on the homepage i will use that for the full portfolio page

thanks again

I’m sorry, I don’t know. If you have JavaScript overwriting your events, you must just steal them back.

I don’t know what “slider” package you are using. If they have a forum or a blog, you might be able to get more help from the author.

do u maybe know of another javacript srolling gallery that i can make look the same as the one i am using that can support a lightbox intergration

I would take a look at using the JavaScript framework jQuery. They have a bunch of plugins for all sorts of thing (including image sliders and gallery and such) that are very easy to use.

I used to code just straight JavaScript and I would pull my hair out with all of the cross-browser issues and scope & binding issues. When I first used Prototype (another JavaScript framework), it was a revelation. It was actually fun again!

Anyway, I have used Prototype way more than jQuery but I am starting to use jQuery exclusively. It is very very cool. They also have a thriving community of cool geeks who are totally willing to answer your questions.

You might be able to just code your own image slider. You’ll be surprised at how few lines of code you’ll have to use too, I bet.