WordPress.org

Ready to get started?Download WordPress

Forums

NextGEN Gallery
Display a link to download a full size image? (2 posts)

  1. Stina Deurell
    Member
    Posted 1 year ago #

    Hi, Is it possible to provide a link under each picture in a gallery, so the visitors can download the original, full size picture for selected photos?

    If this is not possible in Nextgen, is there an other solution?

    Happy for a response!
    Stina

    http://wordpress.org/extend/plugins/nextgen-gallery/

  2. dorsetjon
    Member
    Posted 1 year ago #

    Stina,

    I have been experimenting with something similar and couldn't find any standard way to do this but it can be done with a small customization. To add a link under each thumbnail in the gallery view, edit the following file:

    wp-content/plugins/nextgen-gallery/view/gallery.php

    On or near line 47 there is following:

    <span"><?php echo $image->caption ?></span>

    I added the following line immediately after the <span> line:

    <a href="<?php echo $image->imageURL . "_backup" ?>" title="<?php echo $image->description ?>" target="_blank" >Open full size image</a>

    This adds a link below each thumbnail and clicking on the link will open the full size version of the image in a new window. Note that the code doesn't check whether a full size version exists.

    If anyone's interested, another approach (and this is what I wanted) is to be able to open the original full size image when you click on the normal (resized) image while viewing that. I use the shutter viewer so customized that. Edit this file:

    wp-content/plugins/nextgen-gallery/shutter/shutter-reloaded.js

    We need to change the click action to open the full size image rather than closing the image viewer. We therefore also need a new way to close the viewer, so for that I add an 'X' to the bottom right of the view and clicking that closes the window.

    On around line 135 add the following to create a variable holding the code for the new close link:

    var closelink='<a style="font-family: Arial, Sans-serif; margin: 0px;" href="#" id="shClose" title="Close" onclick="shutterReloaded.hideShutter();">x</a>';

    Immediately after that are lines that populate NavBar and D.innerHTML. Comment out the originals of those lines and insert the following:

    NavBar = '<div id="shTitle"><div id="shPrev">' + prevlink + '</div><div id="shNext">' + nextlink + closelink + '</div><div id="shName">' + shutterLinks[ln].title + '</div>' + imgNum + '</div>';

    D.innerHTML = '<div id="shWrap"><img src="'+shutterLinks[ln].link+'" id="shTopImg" title="Click for full size image" onload="shutterReloaded.showImg();" onclick="' + "var http = new XMLHttpRequest(); http.open('HEAD', this.src+'_backup', false); http.send(); if (http.status!=404) window.open(this.src+'_backup'); else alert('No full size image available');" + '" />' + NavBar +'</div>';

    The NavBar line is updated to include a new close link and the D.innerHTML update causes the full size image to open when the normal image is clicked. Before opening the full size image it checks to see if one exists (using XMLHttpRequest) and an error message is displayed if none is available.

    No doubt there are other and probably better ways to do this but this approach worked for me.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.