x

jQuery plugin

hi everyone. i recently purchased a jQuery plugin so that i could better present my paintings on my weebly site (www.mjblanchette.com). i was told the plugin would not be too difficult to implement, but it's well beyond my skill set. can anyone out there either advise on how to achieve this, or do it for me? i'll pay for the time involved of course. or, if no one here can help, could you advise me on how to find someone that can? i'm pretty certain i don't need a developer, but not all web designers know weebly and/or jquery.  thanks! MJ

4,614 Views
Message 1 of 15
Report
1 Best Answer
Square

Best Answer

That's doable with custom coding - I'm assuming you want it to be like the first image that has a caption, but backwards so the text shows on hover.

By the way, I really like your paintings. Robot Happy

View Best Answer >

4,658 Views
Message 9 of 15
Report
14 REPLIES 14

I am not an expert in jQuery but usually you paste the code in the page layout you want to put in it. It will usually go before the closing body tag.

4,610 Views
Message 2 of 15
Report

thanks. but it's a bit more complicated than that. 

4,602 Views
Message 3 of 15
Report

anybody?
4,580 Views
Message 4 of 15
Report
Square

Hey @MJB! While we can't trouble shoot the plugin if it doesn't work, we might be able to help with how you should integrate it.  

Many plugins need you to add something to either the header area of your site or right before the closing body tag, as well as something else on the page itself.  Do you have a link to instructions for your plugin?

4,578 Views
Message 5 of 15
Report

hi Adam,

yes, here are the instructions. it's just not entirely clear to me if i'm doing it right. they're not written for a dummy like me Smiley Happy and i don't understand most of it. that said, i installed another jQuery plugin, was able to follow the instructions, and it works fine (fine enough). but this one is different...

thanks so much for replying! 

How to install

1. Upload cubeportfolio folder to your server. This folder contains all of the assets of the plugin.
JS
CSS
images
2. Include the following files in your <head> section of the page. Please ensure that all of them have the correct path:
<!-- load cubeportfolio css file -->
<link rel="stylesheet" href="cubeportfolio/css/cubeportfolio.min.css">

<!-- load latest jquery from google resources-->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<!-- load cubeportfolio jQuery plugin -->
<script type="text/javascript" src="cubeportfolio/js/jquery.cubeportfolio.min.js"></script>
Be aware that Cube Portfolio plugin requires jQuery 1.7+. If you already have jQuery on your page, don’t include it second time.

3. Insert the HTML structure below to the <body> section to build the markup (don't forget to update images path!).
For more complex structures please check the templates folder.
<div id="grid-container">
<div class="cbp-item">
<a href="#" title="custom title 1">
<img src="path/to/img1" alt="custom alt 1" width="100%">
</a>
</div>
<div class="cbp-item">
<a href="#" title="custom title 2">
<img src="path/to/img2" alt="custom alt 2" width="100%">
</a>
</div>
<div class="cbp-item">
<a href="#" title="custom title 3">
<img src="path/to/img3" alt="custom alt 3" width="100%">
</a>
</div>
</div>
4. Initialize the Cube Portfolio plugin. Usually just before the closing body tag: For more info about options go to Options section.
<script type="text/javascript">
jQuery(document).ready( function() {
jQuery('#grid-container').cubeportfolio({
// options
});
});
</script>
As an alternative initialization, the options can be placed as a JSON object in the HTML data attributes for grid container:
<div id="grid-container" data-cbp-options='{"rewindNav": false}'>
<div class="cbp-item">
<a href="#" title="custom title 1">
<img src="path/to/img1" alt="custom alt 1" width="100%">
</a>
</div>
</div>
Options

There are numerous options that can be added to configure Cube Portfolio behavior. To set an option, you must add it to the initialization block of code.
<script type="text/javascript">
jQuery('#grid-container').cubeportfolio({
// place here the options. Don't forget to separate them by comma
});
</script>
Full list of options
Name Values Default Description
filters

4,574 Views
Message 6 of 15
Report
Square

Thanks for the instructions, @MJB.  Unfortunately, it would be extremely difficult to get a script like this to work with Weebly because of the extra files you need to upload.

You'd need to make folders and upload them in the theme editor, however the URL of all the files would be different than what their scripting expects.  This means you'd need to customize their javascript so every file URL is correct, which is made all the more difficult because they've given you minimized JS.

Minimized JS loads faster because it's smaller size, but it's basically unreadable to a human so editing it would be very hard. 

I hate to be the bearer of bad news, but I wouldn't recommend trying this one. Robot Sad

Have you checked out some of the media apps in our App Center? We have some different slideshow and image apps that could give you dynamic content, but without all the headache.

Most of them should be found in the Tools category here:

https://www.weebly.com/app-center/category/tools

4,572 Views
Message 7 of 15
Report

hi Adam. while it's not what I wanted to hear, it's enormously helpful and I can officially stop turning my wheels on this one.

none of the tools for my needs, the the other jquery plugin that I installed comes close. almost.

im wondering if it's possible to alter the code to make some modifications to the one I already did. see this test page: http://www.mjblanchette.com/filter-widget-test-page.html

it would be useable it i could do a few things, the most important of which is to add text and actionable function it an item when (and only when) it's selected.

does it ha make sense? do you think it's doable? 

thank you so much. you already saved me so much time and frustration.

MJ

4,566 Views
Message 8 of 15
Report
Square

Best Answer

That's doable with custom coding - I'm assuming you want it to be like the first image that has a caption, but backwards so the text shows on hover.

By the way, I really like your paintings. Robot Happy

4,659 Views
Message 9 of 15
Report

whoops, i was looking for your response and managed to miss it. sorry about that; disregard my nudge and wink Smiley Happy

so yes, that's one thing, i'd the content to appear on hover (the way it is now seems a bit ass backwards, no?). so i'd like to fix that. but most preferably, i'd like to include actionable content once someone actually clicks on one of the images (share, ask about this painting, buy, etc.).

that's why i was trying so desperately to get the cube portfolio to work. see this sample: cube portfolio

that’s my dream portfolio presentation, but i can scale back my wish list to something between the cube portfolio and the one i implemented. i just don’t know how. most of my pleas online have been met with silence or non-english speaking solicitations. if i can’t do this myself, could you cue me into how to ask for what i need? or do you know of someone i could hire to futz with this?

thanks so much Adam, you’ve been really helpful. and thanks so much for the kind words about my work!

4,552 Views
Message 10 of 15
Report

herro?  Woman Wink

1,986 Views
Message 11 of 15
Report
Square


@MJB wrote:

herro?  Woman Wink


Yes, this is Adam speaking? Smiley Tongue

1,984 Views
Message 12 of 15
Report

ps. there are a few other things i'd like to change as well, but nothing as significant as what i described.

M

1,978 Views
Message 13 of 15
Report

Hello @MJB

   We do not have any recommendations for programmer for hire at this time. You would certainly want someone with experience doing this kind of work for you since it will not be very easy to rewrite what is currently there without coding experience.

1,971 Views
Message 14 of 15
Report

So weebly is running jQuery@1.8.3

we are up to 3.4.1.

which will be 7 years old soon

Wake up it's depreciated and has security issues, thought I'd list all of the new versions so please pick one that is not depreciated or vulnerable

1,400 Views
Message 16 of 15
Report
This thread has been archived and locked. Please start a new thread if you would like to continue the conversation.