Galleriffic links
I have a Galleriffic slideshow on开发者_StackOverflow社区 my page. Right now the "large" image links to the next image in the slideshow. How can I make it link to an external file instead?
First, you have to add a hidden div or span tag to your unordered list:
<li>
<a class="thumb" href="/imageurl/image.gif">imageititle</a>
<span id="project-path" style="display:none;">example_path</span>
</li>
Then, add this code to your galleriffic.js file. You are grabbing the path from the span element:
addImage: function(listItem, thumbExists, insert, position) {
var $li = ( typeof listItem === "string" ) ? $(listItem) : listItem;
var $aThumb = $li.find('a.thumb');
** var $path = $li.find('#project-path');
** var projectPath = $path.text();
var slideUrl = $aThumb.attr('href');
var title = $aThumb.attr('title');
var $caption = $li.find('.caption').remove();
var hash = $aThumb.attr('name');
Then, you add the value to the image variable:
var imageData = {
** projectPath:projectPath,
title:title,
slideUrl:slideUrl,
caption:$caption,
hash:hash,
gallery:this,
index:position
};
Now tell the gallery to change the link w/ new path on the full-size gallery images:
// Construct new hidden span for the image
var newSlide = this.$imageContainer
.append('<span class="image-wrapper current"><a class="advance-link" rel="history" href="/project/'+imageData.projectPath+'" title="'+imageData.title+'"> </a></span>')
.find('span.current').css('opacity', '0');
And comment out the gallery click action here, so that your user can just use the normal link wrapping the image:
newSlide.find('a')
.append(imageData.image)
//.click(function(e) {
//gallery.clickHandler(e, this);
//})
;
yep - at http://prestondentalgroup.com.au/downloads.html
The hyperlinks on the slide images allow viewer to open/save a PDF doc.
Works nicely (once I deciphered how to write example_path and to substitute /project/ with the URL of the PDF file (including subfolders).
So to link to readme.pdf from the site's images/downloads/ folder,
example_path becomes images/downloads/readme.pdf
and
/project/ becomes http:/prestondentalgroup.com.au/
精彩评论