Author Topic: How to install the JQuery Plugin Slides JS  (Read 16922 times)

Offline kotsch

  • Posts: 9
How to install the JQuery Plugin Slides JS
« on: April 17, 2012, 03:49:40 PM »
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.

Offline dbs

  • Betatester
  • **
  • Posts: 8116
  • Gender: Male
  • tioz4ever
    • WebsiteBaker - jQuery-Plugins - Module - Droplets - Tests
Re: How to install the JQuery Plugin Slides JS
« Reply #1 on: April 17, 2012, 04:00:39 PM »
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?

Offline kotsch

  • Posts: 9
Re: How to install the JQuery Plugin Slides JS
« Reply #2 on: April 17, 2012, 04:09:26 PM »
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 ?


Offline dbs

  • Betatester
  • **
  • Posts: 8116
  • Gender: Male
  • tioz4ever
    • WebsiteBaker - jQuery-Plugins - Module - Droplets - Tests
Re: How to install the JQuery Plugin Slides JS
« Reply #3 on: April 17, 2012, 04:12:17 PM »
Now you create a preset.

right of the new plugin is a help-button.

Offline Tentschert

  • Posts: 5
Re: How to install the JQuery Plugin Slides JS
« Reply #4 on: April 25, 2012, 07:15:25 PM »
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

Offline kotsch

  • Posts: 9
Re: How to install the JQuery Plugin Slides JS
« Reply #5 on: April 26, 2012, 09:12:49 AM »
Thanks a lot, I got it working .. :mrgreen:

Offline mdemaree99

  • Posts: 102
Re: How to install the JQuery Plugin Slides JS
« Reply #6 on: April 26, 2012, 04:08:25 PM »
Love the JQ Sliders, but wish you could easily integrate them with News.
Seems the Anynews  module is the best option for sliders.(for me anyways)

Currently using the coda slider, but will be working on a BX slider for Anynews this weekend.
Just want a simple slider that has a smaller footprint and loads faster. 

 

postern-length