[SOLVED] JQuery Slider in Template.

[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.

[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.

[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.

[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.

[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

[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

[uniqu3]

Thx ill mark the topis as solved.

[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 ...

[JiiPee]

uniqu3, would you please report back to forum if you manage to get that working. Sounds interesting and usable indeed.

[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.

[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

[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?

[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}

[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.

[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}