NextGen Fancybox Download Button

NextGen Fancybox Download Button

NextGEN Gallery is the most popular WordPress gallery plugin. The following method opens the image the person is viewing (Fancybox) in a new window so they can right-click and save it.

Here's an example of how to make a simple download button for the image you're currently viewing in Fancybox with the NextGen plugin for WordPress.

/* start fancybox download button */
a.dl-button
{
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
box-shadow: #999999;
color: #ffffff;
display: inline-block;
font-size: 13px;
margin-top: 0px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 0px;
padding-top: 5px;
padding-right: 15px;
padding-bottom: 5px;
padding-left: 15px;
text-align: center;
width: auto;
max-width: 100%;
height: auto;
}a.dl-button
{
background-color: #91c448;
background-repeat: repeat;
background-attachment: scroll;
background-position: 0% 0%;
background-clip: border-box;
background-origin: padding-box;
background-size: auto auto;
border-top-width: 1px;
border-right-width-value: 1px;
border-bottom-width: 1px;
border-left-width-value: 1px;
border-top-style: solid;
border-right-style-value: solid;
border-bottom-style: solid;
border-left-style-value: solid;
border-top-color: #91c448;
border-right-color-value: #91c448;
border-bottom-color: #91c448;
border-left-color-value: #91c448;
border-image-source: none;
border-image-slice: 100% 100% 100% 100%;
border-image-width: 1 1 1 1;
border-image-outset: 0 0 0 0;
border-image-repeat: stretch stretch;
}a.dl-button:hover
{
background-color: #91c448;
background-repeat: repeat;
background-attachment: scroll;
background-position: 0% 0%;
background-clip: border-box;
background-origin: padding-box;
background-size: auto auto;
}
/* end fancybox download button */

Step 2 - Add class selector to NextGen

Go to Gallery > Manage Galleries > Choose the gallery to edit.

Galleries-downloadCSS

Alt & Title Text / Description Code:

<a class="dl-button" href="http://www.yourwebsite.com/wp-content/gallery/insects/bee1.jpg" target="_blank">Download Image</a>
Tags: