WebsiteBaker Support (2.8.x) > jQuery

How to install the JQuery Plugin Slides JS

(1/2) > >>

kotsch:
Sorry, I have no idea how to install Slides JS (http://slidesjs.com/).

I now have successfully uploaded the plugin from Libraryadmin into the JQuery Tab.
I now have Slides under my Plugins List.

What do I have to do now ?
I have read the docu from the site but I don't understand at all.

dbs:
Hi, you can't use a plugin from the wild.
A plugin for LibraryAdmin must be created. It had own rules.

Maybe i understand you wrong.
What steps are you doing?

kotsch:
I downloaded the plugin from http://jquery.lepton-cms.org/plugins/slider/jq-slides.php
Than i uploaded it to Website Baker using LibraryAdmin.
I now have it available under the JQuery Tab of the LibraryAdmin.

But what to do now ?

dbs:
Now you create a preset.

right of the new plugin is a help-button.

Tentschert:
1.ok now you must add a code snippet into your editor via the administration module code should be like this:
<div id="container">
<div id="example"> <img id = "ribbon" alt = "New Ribbon" width = "112" height = "112" src = "http://tentschert.dk/templates/Shop/img/new- ribbon.png "/>
<div id="slides">
<div class="slides_container">
<div class="slide"> <a title = "145,365 - Happy bokeh Wednesday! | Flickr - Photo Sharing! ' target = "_blank" href = "http://www.flickr.com/photos/jliba/4665625073/"> <img alt = "Slide 1" width = "570" height = "270" src = "http:/ / tentschert.dk/templates/Shop/img/slide-1.jpg "/> </ a>
<div class="caption" style="bottom: 0px">
<p> Happy bokeh Wednesday: </ p>
</ Div>
</ Div>
<div class="slide"> <a title = "Taxi | Flickr - Photo Sharing! ' target = "_blank" href = "http://www.flickr.com/photos/stephangeyer/3020487807/"> <img alt = "Slide 2" width = "570" height = "270" src = "http:/ / tentschert.dk/templates/Shop/img/slide-2.jpg "/> </ a>
<div class="caption">
<p> Taxi </ p>
</ Div>
</ Div>
<div class="slide"> <a title = "Happy bokeh raining Day | Flickr - Photo Sharing! ' target = "_blank" href = "http://www.flickr.com/photos/childofwar/2984345060/"> <img alt = "Slide 3" width = "570" height = "270" src = "http:/ / tentschert.dk/templates/Shop/img/slide-3.jpg "/> </ a>
<div class="caption">
<p> Happy bokeh raining Day </ p>
</ Div>
</ Div>
<div class="slide"> <a title = "We Eat Light | Flickr - Photo Sharing! ' target = "_blank" href = "http://www.flickr.com/photos/b-tal/117037943/"> <img alt = "Slide 4" width = "570" height = "270" src = "http :/ / tentschert.dk/templates/Shop/img/slide-4.jpg "/> </ a>
<div class="caption">
<p> We Eat Light </ p>
</ Div>
</ Div>
<div class="slide"> <a title = "" I must go down to the sea again, til lonely sea and the sky, and all I ask is a tall ship and a star two steer this city. " | Flickr - Photo Sharing! ' target = "_blank" href = "http://www.flickr.com/photos/bu7amd/3447416780/"> <img alt = "Slide 5" width = "570" height = "270" src = "http:/ / tentschert.dk/templates/Shop/img/slide-5.jpg "/> </ a>
<div class="caption">
<p> "I must go down to the sea again, til lonely sea and the sky ..." </ p>
</ Div>
</ Div>
<div class="slide"> <a title = "twelve.inch | Flickr - Photo Sharing! ' target = "_blank" href = "http://www.flickr.com/photos/streetpreacher/2078765853/"> <img alt = "Slide 6" width = "570" height = "270" src = "http:/ / tentschert.dk/templates/Shop/img/slide-6.jpg "/> </ a>
<div class="caption">
<p> twelve.inch </ p>
</ Div>
</ Div>
<div class="slide"> <a title = "Save my love for loneliness | Flickr - Photo Sharing! ' target = "_blank" href = "http://www.flickr.com/photos/aftab/3152515428/"> <img alt = "Slide 7" width = "570" height = "270" src = "http:/ / tentschert.dk/templates/Shop/img/slide-7.jpg "/> </ a>
<div class="caption">
<p> Save my love for loneliness </ p>
</ Div>
</ Div>
</ Div>
<a class="prev" href="#"> <img alt = "Arrow Prev" width = "24" height = "43" src = "http://tentschert.dk/templates/Shop/img/arrow- prev.png "/> </ a> <a class="next" href="#"> <img alt =" Arrow Next "width =" 24 "height =" 43 "src =" http://tentschert. com / templates / shop / img / arrow-next.png "/> </ a> </ div>
<img id="frame" alt="Example Frame" width="739" height="341" src="http://tentschert.dk/templates/Shop/img/example-frame.png" /> </ div>
<div id="footer">
<p> For full instructions go to <a target="_blank" href="http://slidesjs.com"> http://slidesjs.com </ a>. </ p>
<p> Slider design by Orman Clark <a target="_blank" href="http://www.premiumpixels.com/"> Premium Pixels </ a>. Kan donwload the source PSD <a target="_blank" href="http://www.premiumpixels.com/clean-simple-image-slider-psd/"> Premium Pixels </ a> </ p>
<p> © 2010 <a target="_blank" href="http://nathansearles.com"> Nathan Searles </ a>. All rights reserved. Slides is licensed in the <a target="_blank" href="http://www.apache.org/licenses/LICENSE-2.0"> Apache license </ a>. </ P>
</ Div>
</ Div>
2.
Add a droplet jquerloader into editor
3.uoy must add code into your template CSS to style your slider

Have fun
Tentschert.dk

Navigation

[0] Message Index

[#] Next page