How to: Integrete jquery sliders into Rapidweaver

Kevin Mullins

There is a huge hole in jquery slider capability for Rapidweaver.

Having spent the last 4 hours Googling, searching the RW forums, reading up on jquery sliders, content sliders, and plugins I'm satisfied in stating that there is no known way to insert a freely downloaded jquery slider into RW. (I kid, I kid... ) I know that there must be a way to take these and easily integrate them into a RW theme that has jquery bundled? http://smashinghub.com/responsive-jquery-slider-plugins.htm

Has anyone successfully integrated one of these into their live RW projects? Care to offer a quick tutorial on how to add it in?

tsilva

A good resource is Rapidweaver.org. Some of his tutorials are free, some are part of a paid e-book.

This tutorial looks pretty straight forward:
http://www.woothemes.com/flexslider/

Ive been able to get several sliders to work. You may want to type the full path for the src=" " files (JavaScript and images), so you can see the slider in preview mode. Sometimes the JavaScript only works in the HTML body and not the head in Rapidweaver. Its better to use a HTML page for hand coding, or select " ignore formatting" if using a text page.

You may also need to set up the jQuery script in no conflict mode if your theme also uses jQuery. Type "Rapidweaver+jquery no conflict" in Google to find out how.

tsilva

Correction: RapidweaverFAQ.org

Kevin Mullins

@tsliva

Thanks for chiming in. Let me clarify my comment:

Is there a way to integrate jquery sliders into Rapidweaver via the Resources and the Header/CSS areas in the page inspector. I do not like modifying underlying code because when the theme updates I lose my changes.

I also tried to work through adding the flexslider but couldn't get it to work.

Do you have online exampled you'd be willing to share and step by step instructions of how one might add a slider via the resources/page inspector areas?

tsilva

Kevin,
The example I provided does not affect the "underlying code" , or break theme updates. The javascript code is typically added to the Page Inspector>Header area and the html code is placed in a Styled Text or HTML page, both of which are page types in RW. There are cases where both the javascript and html code for the slider are placed in the body (Styled Text or HTML page), not the head. Images can be referenced from Resources but I never use that and instead upload them to a folder in the root of the site. Either way would works provided the file paths to the images are set up correctly.

For very detailed step by step process, have a look at the examples provided in RapidweaverFAQ.org.

If your still stuck, let me know.

tsilva

Kevin,
Here's another sample tutorial FYI. Almost all the jquery effects need to follow the steps outlined in this example (download code from jquery developer's site, upload code to a folder to your site, add code to RW, set up file paths in RW to uploaded code and images, publish)

http://rapidweaverfaq.org/site/highslide_photo.html

Kevin Mullins

Thanks tsilva, I'll have a go with what you gave me and if I get stuck I'll drop you a line. Thanks again!