Hi, thank you for the module. What I would like is to add links to each individual image.

I dont mind if the image itself isnt a link, just has a text lnk beneath it or something. Is this possible? Thanks

Comments

Mark Theunissen’s picture

Status: Active » Postponed

Probably, but it's very unlikely I'll be making this feature. Sorry. Maybe someone else will volunteer.

Yuki’s picture

Dear SamSound,
did u get any solution abt how to link invidual image (may be under the image it will show link) to some other file?

mafi-a’s picture

Status: Postponed » Active

I also need this feature...

Where do you suppose to start?
I don't think it's possible without hacking the galleria-js-code. My idea was to append the url to the image description and cut it away before displaying the description... any better solution?

greets Marco

BLOK Man’s picture

Did anyone ever get anywhere with this?

Would be very useful to complement this excellent module by allowing main photo images to be clicked on to open a separate node.

Yuki’s picture

???

SuperRookie’s picture

Maybe there is an easy way to use the "alt" field as a url.

beefheartfan’s picture

I was able to get the "alt" field to become a link by creating a small custom module.
That module just has a .js file in it that looks something like this:
--------------------------------------------
(function ($) {
Drupal.behaviors.galleriaimagelink = {
attach: function (context, settings) {
// bind the method to Galleria.ready
Galleria.ready(function(options) {

// this = the gallery instance
// options = the gallery options

this.bind('image', function(e) {
// lets make galleria open a link when clicking the main image:
$(e.imageTarget).click(this.proxy(function() {
if ($('.galleria-info-description').text()) {
window.location = $('.galleria-info-description').text();
}
}));

});
});

// now call galleria on all containers with the className 'galleria'
// the method above will be called on all galleries when initialized
$('.galleria').galleria();
}
};
}(jQuery));

-------------------------

I also added modified the .css file in the Galleria theme to hide the alternate text tag....

.galleria-info-description {
display: none !important;
}

I hope this helps someone!

beefheartfan’s picture

Small update. I noticed the cursor wasn't changing to a "hand" on the image rollover...and the title itself wasn't a link. I've updated my javascript code to correct those anomalies....

(function ($) {
Drupal.behaviors.jhugalleriaimagelink = {
attach: function (context, settings) {

// bind the method to Galleria.ready
Galleria.ready(function(options) {

// this = the gallery instance
// options = the gallery options

this.bind('image', function(e) {
// Make the title a link
if ($('.galleria-info-description').text()) {
$('.galleria-info-title').html(''+$('.galleria-info-title').text()+'');
}

//Galleria.log(e.index) // the image index
//Galleria.log(e.toSource()); // the image index

// lets make galleria open a link when clicking the main image:
$(e.imageTarget).click(this.proxy(function() {
if ($('.galleria-info-description').text()) {
window.location = $('.galleria-info-description').text();
}
}));
// Change the cursor to a hand when you mouse enters the image
$(e.imageTarget).mouseenter(this.proxy(function() {
document.body.style.cursor='pointer';
}));
// Change the cursor back to an arrow when mouse leaves the image
$(e.imageTarget).mouseleave(this.proxy(function() {
document.body.style.cursor='default';
}));
});
});

// now call galleria on all containers with the className 'galleria'
// the method above will be called on all galleries when initialized
$('.galleria').galleria();
}
};
}(jQuery));

philk1990’s picture

Beefheartfan you are awesome! However, i am new to js so is there any chance that you can direct me where to put the code, i understand the CSS part, just unsure as to where to put the JS code

Cheers
Phil

beefheartfan’s picture

Sorry for the late reply. In my custom module I ended up using hook_js_alter to add the JavaScript file to the page I wanted. For example

function YOURMODULENAME_js_alter(&$javascript) {
	// Check to see if Galleria Javascript files exist on this page. If so, add our custom javascript.
	foreach ($javascript as $javascript_key => $javascript_value) {
		if (strpos($javascript_key, 'galleria') !== false) {
			$file = drupal_get_path('module', 'YOURMODULENAME') . '/YOURJAVASCRIPTFILE.js';
			$javascript[$file] = drupal_js_defaults($file);
			break;
		}
	}
	
}

Obviously you would replace YOURMODULENAME and YOURJAVASCRIPTFILE with your specific names.