WebsiteBaker Community Forum

WebsiteBaker Support (2.8.x) => jQuery => Topic started by: Vincent on February 08, 2011, 10:11:17 PM

Title: supersized plugin
Post by: Vincent on February 08, 2011, 10:11:17 PM
Would it be possible to integrate the supersized plugin in jQuery Admin? I'm working on a site for a photogrpher, and he'd love to have someting like this (http://buildinternet.com/project/supersized/). Obviously he'd also need a menu within the page, but I guess I could solve that somehow. The tricky part would be to be able to select the image folder in the backend if WB. Does anyone have a clue how to achieve this?
Ideas highly appreciated.

Kind regards,

Vincent
Title: Re: supersized plugin
Post by: BlackBird on February 09, 2011, 10:36:01 AM
I'll take a look at it. The most complex plugin I ever packed is bMap (for Google Maps), and the most important challange was to include the API key and Latitudes somehow. Managed it. ;) So I'm quite confident that it will be possible. Maybe there will be some additional things to do, I don't know yet.
Title: Re: supersized plugin
Post by: BlackBird on February 09, 2011, 11:03:02 AM
Okay, the only problem I see is that the images to show have to be defined in the JavaScript. The plugin doesn't take the list of images from the HTML (DOM).

Apart from that, the plugin is ready now. Please try it out.

Add this to a WYSIWYG-Section:

Code: [Select]
<!--Loading display while images load-->
<div id="loading">&nbsp;</div>
<!--Slides-->
<div id="supersized">&nbsp;</div>
<div id="prevthumb">&nbsp;</div>
<div id="nextthumb">&nbsp;</div>
<!--Control Bar-->
<div id="controls-wrapper">
<div id="controls"><!--Slide counter-->
<div id="slidecounter">/</div>
<!--Slide captions displayed here-->
<div id="slidecaption">&nbsp;</div>
<!--Navigation-->
<div id="navigation"><img src="images/back_dull.png" id="prevslide" alt="" /><img src="images/pause_dull.png" id="pauseplay" alt="" /><img src="images/forward_dull.png" id="nextslide" alt="" /></div>
<a class="stamp" href="http://www.buildinternet.com"><img src="images/supersized-logo.png" alt="" /></a></div>
</div>

Create your preset and add the images to the slides[] then. Don't forget to put the droplet into the page. Enjoy.

Edit: Don't forget to fix the paths in the navigation div. Otherwise, the images won't show. Just copied&pasted the example markup.

[gelöscht durch Administrator]
Title: Re: supersized plugin
Post by: Vincent on February 09, 2011, 02:49:25 PM
Thank you for your fast reply, Bianka.
I tested it a little (will do more profound testing later), but jQueryAdmin says  the default.preset for plugin [supersized3] is missing....

I also understand that the images used need to be defined in the javascript, making it more complicated for my client to update his site. Hm, that's a pitty...

Anyways, thanks again for your help, and should I have more questions, I'll post them here.

Vincent
Title: Re: supersized plugin
Post by: BlackBird on February 09, 2011, 03:06:50 PM
I tested it a little (will do more profound testing later), but jQueryAdmin says  the default.preset for plugin [supersized3] is missing....

Humm??? But it is in the zip, isn't it?
Edit: Tried it locally, works for me. Make sure the default.preset and loader.preset are located in the plugin's folder.

I also understand that the images used need to be defined in the javascript, making it more complicated for my client to update his site. Hm, that's a pitty...

You could write a JavaScript that scans the page for images and puts them into the options. The other way would be to create a snippet that gets the files from a directory and prints the loader contents into the page.