Stacks Image 6

Dribbble

Playing on court now.

Dribbble

Finally a stack to display your latest Dribbble shots on your web page.

Overview.

Built with a subtle default style, and discrete pagination. This stack is able to show up to 30 shots at any given time, and load further shots via a pagination option, all without reloading the page.

There are a multitude of options for the stacks behaviour. You can show an overlay on hover, containing optional shot info. On click, you can show the larger version of the shot, or direct the user to that shot on the Dribbble website. (All optional).

Every aspect of the Thumbnail gallery can be styled to fit perfectly into your own webpage design.

Instant download.

Version : 1.0.2

Responsive : Yes

First released : 30/4/2015

Last Updated : 24/8/2015

Stacks V 3.0 or greater.

Live demo.

You can see a live example of the stack in action below.

You can display unto 30 at any one time, and unlimited shots by the pagination / navigation seen at the end of the currently displayed gallery of thumbnail images.

Stacks settings.

In this section we have provided a comprehensive list of available settings, and a full description of what each of the settings does for the stack.

Stacks Image 243
Player

Your Dribbble username. As appears in the url of any of your Dribbble shots.

Access token

See the FAQ section below, for a guide to getting your Dribbble access token.

Shots per page

The number of thumbnail images that will be displayed at any one time.

Spacing

The margin between each of the thumbnail images on display.

Frame

A frame border around each of the thumbnail images.

Frame size

The thickness of the frame around each of the thumbnail images.

Nip corners

Apply a tiny corner rounding to each of the thumbnail images.

Tiny shadow

Apply a tiny drop shadow to each of the thumbnail images.

Border

This is a 1px border that will be applied around the outer extents of the thumbnail images even if you have frame selected.

Align centre

Align all the thumbnail images to the centre of the parent container.

On hover

This is the action when a user hovers over a thumbnail image. The options are :

  • Show an overlay with shot info.
  • Do nothing.

On click

This is the action when a user clicks on a thumbnail image. The options are :

  • Show a larger version in a light-box.
  • Send the user to the shot at the Dribbble website.
  • Do nothing.

Hidpi

Use hidpi images in the light-box when they are available.
Hidpi Dribbble images are 800x600 pixels.
While the lower resolution is 400x300 pixels.

Show date

Shows the date of the shot when hovering the thumbnail.

Show likes

Shows how many likes the shot has received when hovering the thumbnail.

Overlay

The colour of the thumbnail hover overlay.

Text

The colour of the thumbnail hover text.

Pagination

Show the pagination section at the end of the gallery of thumbnails, allowing the visitor to show the next set of shots in the series.

Fill

The colour of the pagination section fill.

Buttons

The colour of the pagination section buttons.

Arrows

The colour of the pagination section arrows.

Stacks edit mode.

We pay great attention to how we approach the editing interface of every stack, to ensure intuitive ease of use.

Stacks Image 297

See any changes you make in the stacks setting reflected in real time.

Stacks FAQ.

Important information that is pertinent to this stack. Please read, as there may well be something here that is essential to the deployment of this stack.

Browser support

This stack is supported in all modern browsers. Any exception to this rule will be listed below.

Safari

Chrome

Firefox

Explorer

How do I get my Dribbble access token?

You are required to add your own unique access token supplied by Dribbble, in order to use the stack. It’s real easy to get one, following the instructions below :

Step 1
Go here : https://dribbble.com/account/applications/new
And create a new Dribbble application in order to get an access token (You must be logged into your Dribble account).

Step 2
Fill out the new application form as below :

Stacks Image 704

Step 3
Once you have created your application you will see a page like the one below, where you can copy the access token to your clipboard.

Stacks Image 714

Step 4 and final step
Back inside Rapidweaver, in the Dribbble stacks settings area, add your Dribbble username and the access token you copied to your clipboard. Your stack is now ready to show the shots from the player/username you entered.

Stacks Image 716
Known compatibility issues

There are no known compatibility issues with this stack.

Stack installation

Download.

After purchase, you will be sent an email containing a download link for the stack.
Download the zip file from the link, and unzip it to reveal the stack inside.
You should now see the stack as a logo style icon.

Normal installation.

Double click the un-zipped stack file (the one that looks like a piece of lego).
This will launch Rapidweaver if it was not already running, to automatically install the stack.
Rapidweaver handles the install process from here. Guiding you through a couple of simple clicks to complete the installation.
Re-start Rapidweaver to ensure the installation is complete.
You will now see the new stack in the Stacks plugin library.

Installation where more than one version of Rapidweaver is installed.

Sometimes if there is more than one version of Rapidweaver installed on your system, the double click method launches the wrong version of Rapidweaver to install the stack. To ensure the it is installed into the version you want to install to, you can, instead of double clicking the stack, just drag and drop it onto the appropriate Rapidweaver app icon in your dock at the bottom of your screen.

This will launch Rapidweaver if it was not already running, to automatically install the stack.
Rapidweaver handles the install process from here. Guiding you through a couple of simple clicks to complete the installation.
Re-start Rapidweaver to ensure the installation is complete.
You will now see the new stack in the Stacks plugin library.

Secure checkout.

We trust PayPal as our secure checkout provider.

Don't have a PayPal account? No worries. PayPal allows you to pay with your credit card if you do not have an account set-up.

Instant download.

Stacks Image 589

© 2018 Doobox Software. Building premium Software Mac & RapidWeaver™