CE_image call in Javascript & lightbox

I have just changed from Image sizer to CE_image using Expression Engine.

Walter helped with me with a great script using lightbox but I need to change a variable and am not that knowledgeable with Javascirpt.

Everything else works as it should I just dont have the correct image showing when i want to use lightbox and supersize an image.

The code I used from Walter is this

<script type="text/javascript" charset="utf-8">
	$$('div.preview').first().addClassName('here');
	//add a new link around the large image, assign it a dummy link and 
	//the rel: lightbox so that lightbox.js will recognize it
	var a = new Element('a',{href:'#',rel:'lightbox', title:'{maker}-{modelnumber} Image Protected by Copyright, not to be used elsewhere'});
	$('main').down('img').wrap(a);
	//that's it, only have to do it once and the link is there to be fiddled with later
	$('main').observe('click',function(evt){
		//removed the evt.stop() from this function
		//now whenever main is clicked, change the href of the link to match the current image
		//get a reference to the link
		var a = this.down('a')
		//get a reference to the image
		var img = this.down('img');
		//take the src of the large image and rewrite it so it points to the larger image
		var original = img.src.gsub(/(/cache|-400x500)/, '');
		//take that address and push it into the href attribute of the link. Lightbox.js does the rest.
		a.href = original;
	});
	//this part just does the little image swap into the big image thing, no changes needed here
	$('photos').observe('click',function(evt){
		var elm = evt.findElement('div.preview');
		if(elm){
			$$('div.preview').invoke('removeClassName','here');
			$('main').down('img').src = elm.down('img').src.gsub(/preview/,'image');
			elm.addClassName('here');
		}
	});
</script>

I think its only this line I need to change

var original = img.src.gsub(/(/cache|-400x500)/, '');

An example can be seen here

Any help greatly appreciated

Adam


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

OK so no responses so far but I have got further. I now have CE_image creating its watermarked original image at the same time it creates the medium image and have id each image so I can call them using the .readAttribute command.
I have it working perfectly except I dont know how to make the id change on mousedown or.down. This is the code I have to set the url of the new large watermarked jpg

var original = $('image2').readAttribute('data-large');

‘image2’ is typed but I want it to be either (image1, image2 or image3) depending on which small image has been clicked. These are the ids of those images. Im not javascript literate, I have tried looking up on the net but nothing.

Anybody looking for an alternative image manipulation plug in check out CE_image its pretty awesome

Any help greatly appreciated, I think I may have tried nearly every option to get this to work.

Adam


dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options