Converting a plugin to jQuery

rsilletti · 2007-12-05 03:00:07

Repeat the tag for each image, the destination div will be used by each.

jstubbs · 2007-12-05 19:37:35

Thanks Rick. Seems like your plugin is really simple and works perfectly. I find the help file a little hard to follow though – took some time to figure it out.

So – if I understand you correctly – I should set the tags to something like this:

<txp:ras_rollover_js default_text="rollover text set in JS" />
<div id="image"><txp:ras_rollover_src source_image="191.jpg" rollover_text="something" display_text="display text" html_id="text" /></div>
<div id="text">Text should go here <txp:ras_rollover_dest default_text="This is something" /></div>
</div>

And just set 6 ras_rollover_src source_image=”“ tags? Is it possible to feed a list from a category into the plugin?

I think this thread should be moved to the plugin author support forum..?

rsilletti · 2007-12-05 22:04:48

<txp:ras_rollover_js default_text=“rollover text set in JS” />
*This will set your default text on page load and include the jQuery script, this goes in the head of the document.

<txp:ras_rollover_src source_image=“191” rollover_text=“something1” html_id=“text” />

<txp:ras_rollover_src source_image=“192” rollover_text=“something2” html_id=“text” />

<txp:ras_rollover_dest default_text=“This is something” />

*The source tags would each display an image set by the source_image attribute, this is passed to TXP’s image tag as an id (number only will work), the rollover_text attribute is set as the alt attribute and this used as the rollover text.

*The rollover_dest tag creates the destination element, there should only be one of these – more than one and you get duplicate results on rollover because the destination elements are hardcoded in the tag. If you want it to be a div pass that as the wraptag attribute.

I’m hesitant about pursuing this approach because it is complicated to make sense of even as tags, and the limitations hardcoding things inside them present. I’m downplaying it in favor of direct jQuery scripting for that reason.

I’m not sure what you mean by “feed a list from a category”, but direct jQuery scripting would almost surely be the better approach for more complex operations.

Last edited by rsilletti (2007-12-06 16:23:45)

jstubbs · 2007-12-06 07:27:29

Hi Rick, let me show you an image of what I am looking for:

For the div, I need a header (like H2), and a paragraph of text below. Ideally, I would be able to style the div (id or class) and the H2/p tags too.

Feed from a category means use a category of images, for example category=birds, which would display all the images from the birds category.

Last edited by jstubbs (2007-12-06 07:28:25)

rsilletti · 2007-12-06 16:31:27

The code above should work for this. I removed the display text att from the tag example, if you are dislaying an image you can’t use text – they are mutually exclusive in this case.

Use one rollover_src tag for each image and one rollover_dest tag for the rollover text display div. The default_text setting in rollover_dest is what the text will revert to in your display div on mouseout.

If you are thinking TXP’s gallery image display tags for category display you would have to build a custom tag for that. It’s possible to use text as assigned in captions or descriptions inside TXP for that – I’ve done it in other cases.

jstubbs · 2007-12-07 21:12:23

Hi Rick, I got your script to work and thanks for that. However, I ran into a small problem using it with aro_slideshow, which runs on mootools. Seems mootools and jquery don’t work together :-(

iblastoff pointed me in the direction of jquery’s noConflict() function, but I can’t get it to work. Wondering if you have another recommendation for me, either for another slideshow that runs on jquery, or how to get jquery and aro_slideshow working together?

Thanks for any help.

rsilletti · 2007-12-08 00:26:26

Confilcts arise due to the common use of the “$” shorthand, if you’re using the script itself you can try this
If you are using the plugin let me know and I’ll cobble up a variant that should do the same thing.

I’ve had trouble getting both libraries to work together even with noConflict, though I’m not sure I was using it right at the time. You might ensure you are using the most recent version of jQuery as well.


jQuery.noConflict();
jQuery(document).ready(function() {
jQuery(".rollover_src").hover(function(){
jQuery("#rollover_dest").html(jQuery(this).attr("alt"));
		},function(){
jQuery("#rollover_dest").html("Thanks for dropping by!");
	});
});

Last edited by rsilletti (2007-12-08 00:33:47)

jstubbs · 2007-12-08 08:15:34

Hi Rick, this is what I have at the moment in my header form:

<!-- JS -->
<txp:js n="mootools" />
<txp:js n="slideshow" />
<script type="text/javascript" src="<txp:site_url />textpattern/jquery.js"></script>
<txp:js n="menu" />

The first two – mootools and aro_slideshow – are stored in the stm_javascript plugin. With the above, your plugin works fine (yes, I am using your plugin, not the script, not sure what you mean there), but aro_slideshow does not work.

If I remove the jquery link, the slideshow works fine, but no ras_rollover :-(

If its possible to get both together working, I would be very happy!

Gocom · 2007-12-08 08:37:19

jsubbs,

It’s possible conflict between mootools and jquery, as they both are libraries, and in many cases they cause these things to hapen. As same hapens in example with addevent and mootools, they neither work together.

Cheers!

Last edited by Gocom (2007-12-08 08:38:44)

rsilletti · 2007-12-08 22:21:17

Try the plugin from this download page , it should be self evident.

The plugin renders a jQuery script (view source) that could be included simply as a jQuery script (above) rather than producing it from a TXP tag, much more flexible approach IMHO given that you can then manage the classes and ids affected and multiple instances of either within a single page without the restrictiveness of the plugin coding – you just have to get used to doing some basic jQuery scripting.

jstubbs · 2007-12-09 08:54:57

Thanks for that Rick. Very helpful! I inserted the new plugin and suddenly everything works – aro_slideshow and your plugin.

I assume you are referring to the following, from the page source. Is this script outputted on every TXP page regardless of TXP tags? Do we have to edit the plugin?

<script  type="text/javascript">

//<![CDATA[

jQuery.noConflict();
jQuery(document).ready(function() {
jQuery(".rollover_src").hover(function(){
jQuery("#rollover_dest").html(jQuery(this).attr("alt"));
},function(){
jQuery("#rollover_dest").html("rollover text set in JS");
});

});

//]]>

</script>

Last edited by jstubbs (2007-12-09 08:58:34)

rsilletti · 2007-12-09 15:45:52

The ras_rollover_js tag which returns this script needs to be in the head of each template or page (after the jQuery script is called) that has classes or ids that you need to operate on. Thanks for the feedback, it’s nice to know that it works.

Textpattern CMS

Textpattern CMS support forum

#13 2007-12-05 03:00:07

Re: Converting a plugin to jQuery

#14 2007-12-05 19:37:35

Re: Converting a plugin to jQuery

#15 2007-12-05 22:04:48

Re: Converting a plugin to jQuery

#16 2007-12-06 07:27:29

Re: Converting a plugin to jQuery

#17 2007-12-06 16:31:27

Re: Converting a plugin to jQuery

#18 2007-12-07 21:12:23

Re: Converting a plugin to jQuery

#19 2007-12-08 00:26:26

Re: Converting a plugin to jQuery

#20 2007-12-08 08:15:34

Re: Converting a plugin to jQuery

#21 2007-12-08 08:37:19

Re: Converting a plugin to jQuery

#22 2007-12-08 22:21:17

Re: Converting a plugin to jQuery

#23 2007-12-09 08:54:57

Re: Converting a plugin to jQuery

#24 2007-12-09 15:45:52

Re: Converting a plugin to jQuery

Board footer