Hi guys,
I wonder if anybody can give me an advice.
I am working at a photography site (as many of you might know by now :)) and I realized I made a pretty bad mistake, for the second time in a row unfortunately, which is to rely on javascript to display my pictures. I think it is time to make amends, so I want to make sure the site, the whole site, works with javascript disabled.

I have an idea as to what to do, but I was wondering if you can let me know if this is the right way.
So, here the website, or I should say, the page with the javascript http://antobbo.webspace.virginmedia.com/petras/test/egypt.htm
Needless to say, if you click on the thumbnails (only the first 3 are linked up) adn you have javascript disabled nothing will happen.
Here are the relevant bits of code:
HTML code:
here are the thumbnails

...

<div class = "main_categories">

					<div class = "thumbnail_1">
						<a href="javascript:void(0);"><img style="border: 0pt none;" alt="" src="images/travel_page/travels_boxes_1.jpg" onClick = "change_images('image1')"></a>
					</div><!--END OF thumbnail_1 -->

					<div class = "thumbnail_2">
						<a href="javascript:void(0);"><img style="border: 0pt none;" alt="" src="images/travel_page/travels_boxes_1.jpg" onClick = "change_images('image2')"></a>
					</div><!--END OF thumbnail_2 -->
...

here the big pictures, overlay and close button hidden in the page

...
<div class = "overlay">
					</div><!-- END OF overlay -->

					<div class = "full_images">
						<div class = "image_div">
							<img src = "images/animal_full_11.jpg" alt = "" id = "image1" style="display:none">
							<img src = "images/animal_full_12.jpg" alt = "" id = "image2" style="display:none">
							<img src = "images/animal_full_13.jpg" alt = "" id = "image3" style="display:none">
						</div><!--END OF image_div -->
						<div class = "close_button">
							<a href="javascript:void(0);"><img src = "images/button_9.gif" alt = "" style="border:0"></a>
						</div><!-- END OF close_button -->
					</div><!-- END OF full_images -->
...

The script:

var $full_images;
var $close_button;
var $overlay;

$(function(){
	$full_images = $(".full_images");
	$close_button = $(".close_button");
	$overlay = $(".overlay");
});

function change_images(image){
		var $images = $("#" + image);
		
		$overlay.hide().show();
		$full_images.hide().show("slow");
		$images.hide().fadeIn(1000);
		$close_button.hide().show();
		
		$close_button.unbind('click').click(function(){
					$(this).hide();
					$images.fadeOut("fast");
					$full_images.hide("slow");
					$overlay.hide("slow");
					
		});


}

and the css:

...

.overlay
	{

		display:none;
		background-color:black;
		position:fixed;
		opacity:0.85;
		filter:alpha(opacity=75); /* For IE8 and earlier */
		top:0;
		bottom:0;
		right:0;
		left:0;
		width:100%;
		z-index:100;

	} 
	
.full_images
	{
	
		display:none;
		background-color:transparent;
		position:fixed;
		width:700px;
		height:490px;	
		z-index:102;
		left:50%;
		top:50%;
		margin:-245px 0 0 -350px; 
	
	}
	
.image_div
	{
	
		border:1px solid transparent;
		width:660px;
		height:450px;
		margin:20px auto 0;
		z-index:103;
		/*no positioning so that I can centre the image*/
	}
	
.close_button
	{
		
		position:absolute;
		top:0;
		right:0;
		z-index = 104;
	
	}
...

Ok so, here's what I think I will do.
For non javascript users I will hide the thumbnails away and just display all the big pictures, one below the other one, so there will be quite a bit of scrolling. This will require some changes to the page, in particular: give display:none; to all the thumbnails one by one (I can't hide the class main_categories because it contains the thumbnails and the big pictures), the overlay and instead display just the big pictures. Then on the body tag I will call a script that does the opposite: display the thumbnails and hide the big pictures, overlay and the black background behind the big picture.
I wonder, does this script need to be placed inside the other script I have on the page and that I call as an external file from the head tag or can I add it as a separate one?

Hope it all makes sense

Troy III, that's a very good one, it's amazing what you can do with just css and html, and completely javascript free, impressive, really!! In my case thought applying that code means to completely overhaul my code, whereas I would like to keep it very close to what it is at the moment and just add a script that captures javascript users + few minor changes.

Right, I had a go and it seems to work pretty much fine, there is just one thing which is a bit annoying, well quite a bit.
Here's what I have done. If you don't have javascript enabled the thumbnails ( #thumbnail_1 , #thumbnail_2 etc) are hidden;
the big images one below one another are instead displayed.
I have changed the css slightly so that the big images are not position:fixed; anymore and I gave them margin:0 auto; To bring things back to normal for javascript enabled users I have then created a new external script no_script.js:

function no_javascript(){
	//thumbnails
	document.getElementById('thumbnail_1').style.display='block';
	document.getElementById('thumbnail_2').style.display='block';
	document.getElementById('thumbnail_3').style.display='block';
	document.getElementById('thumbnail_4').style.display='block';
	document.getElementById('thumbnail_5').style.display='block';
	document.getElementById('thumbnail_6').style.display='block';
	document.getElementById('thumbnail_7').style.display='block';
	document.getElementById('thumbnail_8').style.display='block';
	
	//big images
	document.getElementById('image1').style.display="none";
	document.getElementById('image2').style.display="none";
	document.getElementById('image3').style.display="none";
	//big images repositioning
	var big_images = document.getElementById('full_images');
	big_images.style.position = "fixed";
	big_images.style.margin = "-245px 0 0 -350px";
	big_images.style.display = "none";

}

that effectively resets everything to what it was before: thumbnails displayed, overlay, close button, big images with position:fixed; . It all works fine, but as I said at the beginning there is just this thing that is driving me insane: if you land on the page with the thumbnails http://antobbo.webspace.virginmedia.com/petras/test/egypt.htm you will notice that for less than a second all the images are displayed on the page as if javascript was disabled and then they disappear and the page looks as it should. Why is that happening? Does it depends on where I placed the new above script in the page? It's in the head tags, it's the first script in the head and the function that contains is called from the body tag in my page <body onload = "no_javascript()"> Any idea?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.