Quick question about this snippet of code:

[Jon101]

Heres my code:


<script type="text/javascript">
var currentimage = null;
$(document).ready(function(){


$('.jcarousel-skin-tango').addClass('gallery_demo'); // adds new class name to maintain degradability

$('ul.gallery_demo').galleria({
history : true, // activates the history object for bookmarking, back-button etc.
clickNext : false, // helper for making the image clickable
insert : '#main_image', // the containing selector for our main image
onImage : function(image,caption,thumb ) { // let's add some image effects for demonstration purposes

// fade in the image & caption
if(! ($.browser.mozilla && navigator.appVersion.indexOf("Win")!=-1) ) { // FF/Win fades large images terribly slow
image.css('display','none').fadeIn(3500);
}
caption.css('display','none').fadeIn(1000);

// fetch the thumbnail container
var _li = thumb.parents('li');

// fade out inactive thumbnail
_li.siblings().children('img.selected').fadeTo(500,0.3);

// fade in active thumbnail
thumb.fadeTo('fast',1).addClass('selected');

// add a title for the clickable image
image.attr('title','Next image >>');


},
onThumb : function(thumb) { // thumbnail effects goes here

// fetch the thumbnail container
var _li = thumb.parents('li');

// if thumbnail is active, fade all the way.
var _fadeTo = _li.is('.active') ? '1' : '0.3';

// fade in the thumbnail when finnished loading
thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);

// hover effects
thumb.hover(
function() { thumb.fadeTo('fast',1);},
function() { _li.not('.active').children('img').fadeTo('fast',0.3); } // don't fade out if the parent is active

)
}
});

jQuery('#mycarousel').jcarousel({
scroll: 10,
initCallback: mycarousel_initCallback
});


});

function mycarousel_initCallback(carousel) {
jQuery('#main_image').bind('img_change',function() {
var num = parseInt((jQuery('.caption').text()).split(":",1)[0])-1;
carousel.scroll(num);
return false;
});
};
</script>
It's from the Jquery plugin Galleria.

What im trying to do is implement this: image.wrap($(document.createElement('a')).attr('href',thumb.attr('title')));
into the onimage function. No matter how i do it i cant get it to work though. Any ideas?

Thanks!
Jon

[Jon101]

Anyone have any ideas? Please let me know if this isn't clear...

[Jesdisciple]

Do you know of any documentation for Galleria, particularly the methods you want to use?

You might want to ask this question at a JQuery forum, because we don't work with it much.

[Jon101]

I'm not sure if there is any specific documentation about adding an on-click function. I'll try my luck at jquery's forums.

Thanks for the advice!

[Jon101]

Just to follow up - i got it to work.... i was making a silly mistake.

Now, how would i make it load the url in a new window? Here's the code again:

image.wrap($(document.createElement('a')).attr('href',thumb.attr('title')));

thanks!
Jon

[Jesdisciple]

See window.open (http://javascript.wikia.com/wiki/Window#open). (Omitting the second parameter makes a new window.) Note, however, that crucial pages should be accessible without JS.

[Jon101]

I checked out the link but I'm not quite sure how to apply it.. I'm not experienced with javascript at all really.

Sorry if I'm making a mountain out of a hill!

Thanks for the help Jesdisciple - i apreciate it.

[Jesdisciple]

window.open('page.html');That's equivalent to this (in Fx and IE, maybe not in others):
window.open('page.html', '_blank');

[Jon101]

Thanks for the quick response - so should it look something like this?

image.wrap($(document.createElement('a')).attr('href',thumb.attr('link')));
window.open('page.html', '_blank');

[Jesdisciple]

I don't know what the other line does... If they should happen in that order, then that's correct.

Also, my line assumes that a file named "page.html" exists in the current directory. (Not sure how obvious that already was...)

[Jon101]

heheh, i did now that much about the page.html

I cant seem to get it to work anywhere within that line.. hmm tricky

[Jesdisciple]

If you'll post your entire page (with all external scripts internalized for convenience), I'll see if I can debug it.

[Jon101]

Thanks J/D i appreciate it. I'll worry about it in a couple of days.

Thanks again for all your help.

[rangana]

Just to follow up - i got it to work.... i was making a silly mistake.

Now, how would i make it load the url in a new window? Here's the code again:

image.wrap($(document.createElement('a')).attr('href',thumb.attr('title')));

thanks!
Jon

Try:


window.open($(thumb).attr('title'),'window_name');


I'm assuming that thumb variable which is passed on your onimage function returns a URL.

Hope that helps.

[Jon101]

That did seem to work however i think i need to use it within an image.wrap tag if possible. It's hard to explain but im using a jquery photo gallery and when i dont use image.wrap it doesnt make the click on the large image but rather on the thumbnail...

Any way, this worked but like i said, i think it needs to be in an image.wrap tag... How can i do this?