Active
Project:
Galleria
Version:
6.x-1.x-dev
Component:
Miscellaneous
Priority:
Normal
Category:
Support request
Assigned:
Unassigned
Reporter:
Created:
6 Jun 2009 at 06:25 UTC
Updated:
21 Feb 2012 at 14:37 UTC
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
Comment #1
Mark Theunissen commentedProbably, but it's very unlikely I'll be making this feature. Sorry. Maybe someone else will volunteer.
Comment #2
Yuki commentedDear 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?
Comment #3
mafi-a commentedI 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
Comment #4
BLOK Man commentedDid 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.
Comment #5
Yuki commented???
Comment #6
SuperRookie commentedMaybe there is an easy way to use the "alt" field as a url.
Comment #7
beefheartfan commentedI 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!
Comment #8
beefheartfan commentedSmall 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));
Comment #9
philk1990 commentedBeefheartfan 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
Comment #10
beefheartfan commentedSorry 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
Obviously you would replace YOURMODULENAME and YOURJAVASCRIPTFILE with your specific names.