My real plugin problem

4 messages

My real plugin problem

Reply Threaded

Hi Lionel!

I made the same test with the jQuery plugin I'm going to use in my real application. It works too.

But now I have some questions:

1- How can I add something like this in my page using WickeXt?

<script type="text/javascript">

$(document).ready(function(){

$('.gallery_demo_unstyled').addClass('gallery_demo'); // adds new class name to maintain degradability

$('ul.gallery_demo').galleria({
history : true, // activates the history object for bookmarking, back-button etc.
clickNext : true, // helper for making the image clickable
insert : '#main_image', // the containing selector for our main image
onImage : function(image,caption,thumb) { // let's add some image effects for demonstration purposes

// fade in the image & caption
image.css('display','none').fadeIn(1000);
caption.css('display','none').fadeIn(1000);

// fetch the thumbnail container
var _li = thumb.parents('li');

// fade out inactive thumbnail
_li.siblings().children('img.selected').fadeTo(500,0.3);

// fade in active thumbnail
thumb.fadeTo('fast',1).addClass('selected');

// add a title for the clickable image
image.attr('title','Next image >>');
},
onThumb : function(thumb) { // thumbnail effects goes here

// fetch the thumbnail container
var _li = thumb.parents('li');

// if thumbnail is active, fade all the way.
var _fadeTo = _li.is('.active') ? '1' : '0.3';

// fade in the thumbnail when finnished loading
thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);

// hover effects
thumb.hover(
function() { thumb.fadeTo('fast',1); },
function() { _li.not('.active').children('img').fadeTo('fast',0.3); } // don't fade out if the parent is active
)
}
});
});

</script>
<style media="screen,projection" type="text/css">

/* BEGIN DEMO STYLE */
*{margin:0;padding:0}
body{padding:20px;background:white;text-align:center;background:black;color:#bba;font:80%/140% georgia,serif;}
h1,h2{font:bold 80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;}
a{color:#348;text-decoration:none;outline:none;}
a:hover{color:#67a;}
.caption{font-style:italic;color:#887;}
.demo{position:relative;margin-top:2em;}
.gallery_demo{width:702px;margin:0 auto;}
.gallery_demo li{width:68px;height:50px;border:3px double #111;margin: 0 2px;background:#000;}
.gallery_demo li div{left:240px}
.gallery_demo li div .caption{font:italic 0.7em/1.4 georgia,serif;}

#main_image{margin:0 auto 60px auto;height:438px;width:700px;background:black;}
#main_image img{margin-bottom:10px;}

.nav{padding-top:15px;clear:both;font:80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;}

.info{text-align:left;width:700px;margin:30px auto;border-top:1px dotted #221;padding-top:30px;}
.info p{margin-top:1.6em;}

</style>

page "body"

<body>
<div class="demo">
<div id="main_image"></div>
<ul class="gallery_demo_unstyled">
<li> Stones

</li>
<li class="active"> Grass Blades

</li>
<li> Ladybug

</li>
<li> Lightning

</li>
<li> Lotus

</li>
<li> Mojave

</li>
<li> Pier

</li>
<li> Sea Mist

</li>
</ul>
<p class="nav">« previous | next »</p>
</div>
</body>

2- Or should I do this in the plugin class?

I saw the examples at the WickeXt homepage but I'm too confused. Can you help again?

Thanks in advance,
Kate.

Lionel Armanet

Re: My real plugin problem

Reply Threaded

Hi Kate,

I think that WickeXt JavaScript generation tool should not replace JavaScript itselves. It helps writing jQuery statements from Wicket when you need it. In your case, you should export your code in a separated .js file and then integrate this JS file as a WickeXt plugin (like the tree example).

Lionel

On Wed, Dec 3, 2008 at 4:48 PM, emmykate (via Nabble) <[hidden email]> wrote:

Hi Lionel!

I made the same test with the jQuery plugin I'm going to use in my real application. It works too.

But now I have some questions:

1- How can I add something like this in my page using WickeXt?

<script type="text/javascript">

$(document).ready(function(){

$('.gallery_demo_unstyled').addClass('gallery_demo'); // adds new class name to maintain degradability

$('ul.gallery_demo').galleria({
history : true, // activates the history object for bookmarking, back-button etc.
clickNext : true, // helper for making the image clickable
insert : '#main_image', // the containing selector for our main image
onImage : function(image,caption,thumb) { // let's add some image effects for demonstration purposes

// fade in the image & caption
image.css('display','none').fadeIn(1000);
caption.css('display','none').fadeIn(1000);

// fetch the thumbnail container
var _li = thumb.parents('li');

// fade out inactive thumbnail
_li.siblings().children('img.selected').fadeTo(500,0.3);

// fade in active thumbnail
thumb.fadeTo('fast',1).addClass('selected');

// add a title for the clickable image
image.attr('title','Next image >>');
},
onThumb : function(thumb) { // thumbnail effects goes here

// fetch the thumbnail container
var _li = thumb.parents('li');

// if thumbnail is active, fade all the way.
var _fadeTo = _li.is('.active') ? '1' : '0.3';

// fade in the thumbnail when finnished loading
thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);

// hover effects
thumb.hover(
function() { thumb.fadeTo('fast',1); },
function() { _li.not('.active').children('img').fadeTo('fast',0.3); } // don't fade out if the parent is active
)
}
});
});

</script>
<style media="screen,projection" type="text/css">

/* BEGIN DEMO STYLE */
*{margin:0;padding:0}
body{padding:20px;background:white;text-align:center;background:black;color:#bba;font:80%/140% georgia,serif;}
h1,h2{font:bold 80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;}
a{color:#348;text-decoration:none;outline:none;}
a:hover{color:#67a;}
.caption{font-style:italic;color:#887;}
.demo{position:relative;margin-top:2em;}
.gallery_demo{width:702px;margin:0 auto;}
.gallery_demo li{width:68px;height:50px;border:3px double #111;margin: 0 2px;background:#000;}
.gallery_demo li div{left:240px}
.gallery_demo li div .caption{font:italic 0.7em/1.4 georgia,serif;}

#main_image{margin:0 auto 60px auto;height:438px;width:700px;background:black;}
#main_image img{margin-bottom:10px;}

.nav{padding-top:15px;clear:both;font:80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;}

.info{text-align:left;width:700px;margin:30px auto;border-top:1px dotted #221;padding-top:30px;}
.info p{margin-top:1.6em;}

</style>

page "body"

<body>
<div class="demo">
<div id="main_image"></div>
<ul class="gallery_demo_unstyled">
<li></li>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<p class="nav">« previous | next »</p>
</div>
</body>

2- Or should I do this in the plugin class?

I saw the examples at the WickeXt homepage but I'm too confused. Can you help again?

Thanks in advance,
Kate.

--
__________________________________

Lionel Armanet
http://www.wickext.org
gmail: lionel.armanet*at*gmail.com

emmykate

Re: My real plugin problem

Reply Threaded

Hi!

Lionel, thanks for answering.
I create a "WickextPlugin" for the jQuery plugin I'm trying to use. This plugin take a ul/li tags (like treeview) and creates a gallery of images; it gives some options to styling the gallery. The snippet of code I've posted is in the page for this purpose.
Is there a way that I can do this "styling" with WickeXt?
You told to put the JavaScript in a .js file; can a "WickextPlugin" have more than a .js/.css file?
Thanks for your time.

Kate

Lionel Armanet

Re: My real plugin problem

Reply Threaded

Hi Katia,

Ok, you should do like the example you saw on the website e.g. create
a WickeXt plugin that auto imports your JavaScript file and then binds
the "galeria" statement. Then, you have WickeXt Options to help you to
add config options to your component.

In other words, your plugin should do the following:

public JsStatement statement() {
return new JsQuery(this).$().chain("galleria");
}

To use WickeXt options, you can base your source code on this one:
http://code.google.com/p/wickext/source/browse/branches/0.9/src/main/java/org/objetdirect/wickext/plugins/treeview/TreeViewPlugin.java

As you can see, we call the "chain" method with an instance of
"Options" (that represents JavaScript's anonymous objects).

Hope this helps.

Lionel

On Wed, Dec 3, 2008 at 11:52 PM, emmykate (via Nabble)
<[hidden email]> wrote:

> Hi!
>
> Lionel, thanks for answering.
> I create a "WickextPlugin" for the jQuery plugin I'm trying to use. This
> plugin take a ul/li tags (like treeview) and creates a gallery of images; it
> gives some options to styling the gallery. The snippet of code I've posted
> is in the page for this purpose.
> Is there a way that I can do this "styling" with WickeXt?
> You told to put the JavaScript in a .js file; can a "WickextPlugin" have
> more than a .js/.css file?
> Thanks for your time.
>
> Kate
>
> ________________________________
> View message @
> http://n2.nabble.com/My-real-plugin-problem-tp1609364p1611097.html
> To start a new topic under WickeXt - User forum, email
> [hidden email]
> To unsubscribe from WickeXt - User forum, click here.
>

--
__________________________________

Lionel Armanet
http://www.wickext.org
gmail: lionel.armanet*at*gmail.com