My Weebly Tricks: Weebly Tricks #88 - JQuery Responsive and Sortable Portfolio Plugin

jQuery Responsive and Sortable Portfolio Plugin for Weebly

An awesome combination of effects will greet you this new year. Sortable, responsive and classic jQuery Portfolio plugin will surely make your images more presentable. This is a special request of our Weebler Pextra. Why not give a look.

CLICK HERE FOR LIVE DEMO

Before we begin, I would like to remind you of some important things. This is a responsive plug in and the best output can only be achieved using a responsive template on Weebly. They provide for free so no worry. Secondly, there may be issues on browser to browser so I leave the rest for you to enhance the output. This isn't a perfect tutorial but I guess it's the most appropriate as of now.

There are four things which makes this plugin a "combo" for your images. First, it is responsive. Secondly, a unique hover effects is applied to each image. Third, they can be sorted or classified. Lastly, when an image is clicked, a larger version of it will appear and a slider is presented.

Ok let's begin.

FILES NEEDED
How to use these files? Click Here!

FOOTER CODE
Where to place these codes? Click Here!

I know it's a bunch of codes but we will make it simpler for you to understand. First, change the red mark text with your site address(4) assuming you uploaded these files on your site.

Now, we will get a segment of the JavaScript for a single gallery which I highlighted above in yellow including the brackets and comma at the end. Below is the code I highlighted:

{
'title' : 'Azuki bean',
'description' : 'Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage soko coriander sweet pepper water spinach winter purslane shallot tigernut lentil beetroot.Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage.',
'thumbnail' : ['http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/1.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/2.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/3.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/10.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/11.jpg'],
'large' : ['http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/1.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/2.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/3.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/10.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/11.jpg'],
'button_list' :
[
{ 'title':'Demo', 'url' : 'http://www.jqueryscript.net' },
{ 'title':'Download', 'url':'http://www.jqueryscript.net'}
],
'tags' : ['Portrait']
},

Now refer to these legends:
Red text - This will be the title of a single gallery.
Yellow text - The description of course.
Green text - The links of your images. These images are the thumbnails.
Blue text - Links of the images for the large version of the thumbnails.
Pink text - The name or title of your 2 buttons.
Orange text - The links of the buttons.
Violet text - The tag of this gallery. Tags are used to sort you images. It can be Portrait, Landscape, Vintage or anything.

HEADER CODE
Where to place these codes? Click Here!

These codes are optional, but I suggest to you to add them:

The codes above helps you make the responsiveness accurate and be compatible to your templates own settings.

BODY CODE
Where to place these codes? Click Here!

CONCLUSION

Courtesy to jqueryscript.net for the images. And there are lot of them, anyway, that's a gallery for. I did my best to illustrate everything that can help you with this plugin. There are errors ofcourse and its your part to research and correct them. At any means, I will help you edit it, just post to the forum.

Thank you so much.

Tags: Image Mouseover, Image Slideshows

3 comments:

GeeJanuary 3, 2015 at 1:11 PM
Thank you for all of your tutorials, they are great. My question is: is it easy to add or delete the amount of categories? ( Instead of 3 filters, add 4 or instead of the 6 items, add 8) Do you believe doing so will effect the stability?

Thank you in advance!!!
AnonymousJanuary 14, 2015 at 7:25 AM
how can I change the size of the image well after clicking

January 2, 2015

Weebly Tricks #88 - JQuery Responsive and Sortable Portfolio Plugin

3 comments:

Search

Labels