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
