Pixelpost

Finner · #1 02-12-2008, 08:00 PM

I've used the nice image navigation method from Simplicious in my site redesign - where each half of the image has an overlay rollover for prev/next - but, as with the Similicious demo site (http://www.sotolicious.com/keepers), this isn't validating.
Does anyone know how this can be fixed, or some way of doing the same thing but with a different script that will validate?

Any help is appreciated, thanks

http://oculus.farfromreal.com

xact · #2 02-12-2008, 08:47 PM

1. Download image wraparound addon, install it.

2. Delete this after <body> line

Code:

<script type="text/javascript">
	function browsing(){
		var existprev = "<IMAGE_PREVIOUS_ID>";
		var existnext = "<IMAGE_NEXT_ID>";
		if (existprev != "<IMAGE_ID>"){
			document.write('<a href="#" id="menu_browse_prev" title="click for previous" onclick="document.location=\'index.php?showimage=<IMAGE_PREVIOUS_ID>\';"></a>');
		}
		if (existnext != "<IMAGE_ID>"){
			document.write('<a href="#" id="menu_browse_next" title="click for next" onclick="document.location=\'index.php?showimage=<IMAGE_NEXT_ID>\';"></a>');
		}
	}
</script>

3. Replace this:

Code:

<script type="text/javascript">
        browsing();
        </script>

with this:

Code:

<a href='http://www.blur.ro/index.php?showimage=<IMAGE_NEXT_ID_WRAPAROUND>' id="menu_browse_prev"></a>
<a href='http://www.blur.ro/index.php?showimage=<IMAGE_PREVIOUS_ID_WRAPAROUND>' id="menu_browse_next"></a>

Good luck!

**Dkozikowski**+ · #3 02-12-2008, 08:58 PM

Xact, I don't think that is what Finner is looking for.

Finner, what you want to do so your site validates is wrap the JS code in  like so:

Code:

<script type="text/javascript">
<!--
	function browsing(){
		var existprev = "<IMAGE_PREVIOUS_ID>";
		var existnext = "<IMAGE_NEXT_ID>";
		if (existprev != "<IMAGE_ID>"){
			document.write('<a href="#" id="menu_browse_prev" title="click for previous" onclick="document.location=\'index.php?showimage=<IMAGE_PREVIOUS_ID>\';"></a>');
		}
		if (existnext != "<IMAGE_ID>"){
			document.write('<a href="#" id="menu_browse_next" title="click for next" onclick="document.location=\'index.php?showimage=<IMAGE_NEXT_ID>\';"></a>');
		}
	}
// -->
</script>

Finner · #4 02-12-2008, 11:01 PM

oh! wonderful - thank you dwilkinsjr! that's just what it needed. I'm curious as to why that makes such a difference..but glad it does.

**Dkozikowski**+ · #5 02-12-2008, 11:39 PM

The W3C validator does not validate JS code so all you did was hide the JS code from the validator by wrapping it in the comment tags.

This will also hide the JS from any browser that does not support it (hence, the W3C validator).

Finner · #6 02-13-2008, 07:58 PM

Ah yes, fair enough - I'll keep that in mind for next time (I should have known that anyway being a web developer...

).

xact - had a look at the image wraparound.. is a nice feature and seems to be a bit of a cleaner implementation too. thanks

Pixelpost

Authentic Photoblog Flavour