Quantcast

Quicksand Demo featuring Shadowbox

classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Quicksand Demo featuring Shadowbox

arttronics
From a previous post here on the Shadowbox forum, a member want's to use the jQuery Quicksand plugin with Shadowbox.

That plugin is featured in a CSS3 tutorial demo by Martin Angelov titled "Making a Beautiful HTML5 Portfolio" which is IE8 friendly if required.

I spent some time with that Demo and working with jQuery Quicksand and have come up with the correct markup needed to make that Demo function with Shadowbox.

The Home Page for the Demo Project is HERE.
The viewable Live Demo is HERE, without Shadowbox.
The direct Download for the Demo is HERE, without Shadowbox.

At the end of this post are 2 modified files for you to download.

The Shadowbox functionality in this modified script includes:
    1. Shadowbox Title function based on Quicksand Active Menu Name
    2. Clearing Shadowbox's cached items for every instance of a Quicksand Filtering Event.
    3. Soft rebooting any Parent Page Shadowbox Classed items.
    4. Soft rebooting Shadowbox for newly generated Quicksand Active Menu items.
    5. Linking all Quicksand Active Menu items to a single Shadowbox Gallery.

Besides Shadowbox being used in this script, there are three changes to allow additional customization to the Quicksand Demo:
    1. Moving the script created 'Everything' Quicksand Menu Option to any position on the Menu.
    2. Selecting which Quicksand Menu Option should be activated on page load.
    3. Using onclick handler for Quicksand Menu Options.
     
The modified Parent Page changes include customizing the order of the Quicksand Menu Names in a easy to use method.
     
There are various console.log messages that are presented in this modified script, but are disabled until needed. Console.log messages should never exist on a live webpage.

The script_SB.js file also have a lot of comments to answer or understand how Shadowbox is use in it.

The home page for jQuery Quicksand plugin has configuration information so you can modify the jquery.quicksand.js file for CSS3 options or not.


Presented here is an alternate index.html page and script.js file to use with the above Demo that enables Shadowbox functionality.

Right click these two files and Save to your hard drive.
index_SB.html
script_SB.js

When posting your markup here on the forum follow these simple steps:

0. Login and paste your markup into the Message Box.
1. Mouse select the markup you just pasted.
2. Press the More Button from the Message Box Toolbar.
3. Select Raw text from the drop down menu. DONE!

If I don't respond to your POST, it's your inability to provide your markup correctly.

Check out a few DEMOS I made that are here in this forum.

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Quicksand Demo featuring Shadowbox

Halee
Ok i moved your files to my portfolio file i down loaded, and moved the js to the assets/js folder, but when the images are clicked they open in a new page and not in a shadow box? what am i doing wrong?
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Quicksand Demo featuring Shadowbox

Jenia
Thank you SOOOOOOOOOOOOOOO MUCH! Finally It works! I consider donating :)!!!!!!!!!!
Loading...