Page 1 of 2
[SOLVED] JQuery Slider in Template.
Posted: Wed Apr 22, 2009 11:20 am
by uniqu3
Hi everyone,
i am working on a new CMSMS Project or better to say i am planing to do this in CMSMS again.
The question is can i implement in my Design a Jquery slider like in this example
http://cssglobe.com/lab/easyslider1.5/04.html
I know i can implement it but how can i implement it so the end user could use it easily without having to edit the HTML code for this part of the Template.
Can it be done with Album Module or any other way so the user can see and select desired images to be used?
If yes how?
Currently i am owrking on Design so there is no CMSMS Version, but i am planing to use 1.5.4.
Re: JQuery Slider in Template.
Posted: Wed Apr 22, 2009 3:52 pm
by tyman00
I am not quite sure I follow your exact needs. How much would your client actually be changing? Do you want them to be able to just modify or add/remove/modify the content of the slider?
If so, you may want to use something like Album (so long as you don't need much text to go with it). You may also be able to use Products for this... each photo is a product, but that may be a bit bloated for what you need.
If you can be a little more specific on what role your clients will have and what exactly the content will be maybe we can find something that will work. I wouldn't mind coming up with some ideas with you because I know I could put this to use as well.
Re: JQuery Slider in Template.
Posted: Wed Apr 22, 2009 4:04 pm
by uniqu3
The website is for a Florist, so the content is about Gardening.
The Enduser wouldnt need some bloated functionality for this, the slider is more or less there to display some new flowers or anything gardneing related with a small comment.
Since gardening depends on time of the year like now in Spring there are different flowers etc. then in auttumn so the user should be able to switch these pictures or add new easily.
Re: JQuery Slider in Template.
Posted: Wed Apr 22, 2009 4:13 pm
by tyman00
If it's going to be only photos/images I would probably build that into an Album template. Then you can have a "Slider" album and apply that template to that album. Then just show them how to add/remove items from that album.
Re: JQuery Slider in Template.
Posted: Wed Apr 22, 2009 5:52 pm
by uniqu3
Ok, then i will go with the Album, i hope i can make the tempalte working as i want

Is there anywhere more documentation on Album except the "Help" section in modules of CMSMS installation?
If i get it working ill include it in my next theme release

Re: JQuery Slider in Template.
Posted: Wed Apr 22, 2009 5:55 pm
by tyman00
I am not aware of much more documentation.
This may be a little helpful:
http://wiki.cmsmadesimple.org/index.php ... tent/Album
Though you can use mark's site as inspiration:
http://multiintech.com/galleries.html
Re: JQuery Slider in Template.
Posted: Wed Apr 22, 2009 5:57 pm
by uniqu3
Thx ill mark the topis as solved.
Re: [SOLVED] JQuery Slider in Template.
Posted: Thu Apr 23, 2009 5:59 am
by Dr.CSS
Thanks for another album template to be added into Album, someday I'll quit adding them and just commit all these new ones to the module

...
Re: [SOLVED] JQuery Slider in Template.
Posted: Thu Apr 23, 2009 7:42 am
by JiiPee
uniqu3, would you please report back to forum if you manage to get that working. Sounds interesting and usable indeed.
Re: [SOLVED] JQuery Slider in Template.
Posted: Thu Apr 23, 2009 2:34 pm
by tyman00
I like the look of that one a lot. It should come in handy for a "featured products" template I want to work on in the Products module. When I get that one rolling, I'll try to remember to post it here. Thanks for the good link Uniqu3.
Re: [SOLVED] JQuery Slider in Template.
Posted: Thu Apr 23, 2009 7:21 pm
by uniqu3
Hi,
@tyman00 i am happy i could give you some ideas

maybe you will find this one interesting to
http://jqueryfordesigners.com/coda-slider-effect/
I will post the Album Template when i get it working, currently i am waiting for a go on this project and since im busy with some other work i am not trying to accomplish the task before needed

Re: [SOLVED] JQuery Slider in Template.
Posted: Mon May 04, 2009 11:00 am
by JiiPee
Can I ask if I installed this Easyslider test correctly or not.
1. I created new page where I placed in "Page Specific Metadata:"
{literal}
$(document).ready(function(){
$("#slider").easySlider();
});
{/literal}
2.Then in page content I placed:
3. Then I created new stylesheet (and attached it to page template):
/* Easy Slider */
img{border:none;}
#slider ul, #slider li{
margin:0;
padding:0;
list-style:none;
}
#slider li{
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
width:696px;
height:241px;
overflow:hidden;
}
span#prevBtn{}
span#nextBtn{}
/* // Easy Slider */
I wonder why it needs
in two places, otherwise it dont work for me?
Re: [SOLVED] JQuery Slider in Template.
Posted: Mon May 04, 2009 2:13 pm
by uniqu3
Hi,
it should work with only one js call but maybe the problem could be your missplaced {literal}.
Code: Select all
<__script__ type="text/javascript">
{literal} <--- This should go to top?
$(document).ready(function(){
$("#slider").easySlider();
});
</__script>
{/literal}
Re: [SOLVED] JQuery Slider in Template.
Posted: Mon May 04, 2009 7:39 pm
by JiiPee
Thank you for your help, Im totally new to JQuery.
I notised that if I use
{literal}
<!--
$(document).ready(function(){
$("#slider").easySlider();
});
{/literal}
in the page content, everything works fine. But if I place it in the page specific metadata, then firefox 3 expands the div horizontally too long (IE works fine). Is it so that these $-thingys need to be in body and not in head?
Next I need to figure out how to position those next/previous buttons since they are way too high now, damn.
Re: [SOLVED] JQuery Slider in Template.
Posted: Mon May 04, 2009 8:59 pm
by uniqu3
Do you have a live example of your site?
Maybe you have just misplaced some or something.
Be sure that you call it like:
Code: Select all
{literal}
<__script__ type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true
});
});
</__script>
{/literal}