How do I integrat a slider in web designer 7 ?

[erde]

HI

I like to show 4-5 pictures on the top of my website. With the widget in designer 7 I am not quite happy. I wonder if I can integrate the code of a 3rd party slider. e.g. easyslider 1.7.

I downloaded the slider but then it ends. I got those folders:
css
images
js

no html code with I can put in a placeholder. PLEASE HELP. Ho can I integrate this in my website

[Big Frank]

It would help, for those of us who haven't used the widget, if you could show us an example of what you want to achieve

[erde]

Hi beretgascon

Sorry for that, here is the link: http://cssglobe.com/lab/easyslider1.7/01.html. I like to integrated this slider into web desinger 7, if its possible :-)

Best,
Erde

[Big Frank]

You can easily do this in Xara using Flash - would you like me to show you?

[erde]

I've chosen a jquery slider because it should also work on iphone/ipad. Flash I fancy a lot,
but I do not have experiance in programming flash. What would you recommend ?

[Big Frank]

Flash will not work on earlier iphone/ipads, which is a shame, but never mind.

You don't need any Flash programming experience to create simple Flash animations using Xara. It's really quite simple.

[pauland]

HI

I like to show 4-5 pictures on the top of my website. With the widget in designer 7 I am not quite happy. I wonder if I can integrate the code of a 3rd party slider. e.g. easyslider 1.7.

I downloaded the slider but then it ends. I got those folders:
css
images
js

no html code with I can put in a placeholder. PLEASE HELP. Ho can I integrate this in my website

The link you provided shows the usage:

$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true
});
});

The code above is javascript, so add that as javascript to the page.

In the example page provided, the code is added like this:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easySlider1.7.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true
});
});
</script>


<link href="css/screen.css" rel="stylesheet" type="text/css" media="screen" />

And you need to add that in the head tags of the page.

The code manipulates a <div> element, so you need a html placeholder for your gallery, with a named div - eg. <div id="slider" /> inside the placeholder.

If you look at the page source of the example in your link, you will see:

<div id="slider">
<ul>
<li><a href="http://templatica.com/preview/30"><img src="images/01.jpg" alt="Css Template Preview" /></a></li>
<li><a href="http://templatica.com/preview/7"><img src="images/02.jpg" alt="Css Template Preview" /></a></li>
<li><a href="http://templatica.com/preview/25"><img src="images/03.jpg" alt="Css Template Preview" /></a></li>
<li><a href="http://templatica.com/preview/26"><img src="images/04.jpg" alt="Css Template Preview" /></a></li>
<li><a href="http://templatica.com/preview/27"><img src="images/05.jpg" alt="Css Template Preview" /></a></li>
</ul>
</div>

So, there are five images, with links and alt text.

This is the kind of code you need in a placeholder.

I hope that can get you going. Make a test page first.

Paul

[erde]

Thank you so much for that answer. I tried and tried but I have to admit that it's a bit
to advanced for my poor understanding

I did like this:
1. I opened a new document in webdesigner 7
2. I draw a rectangle and put into the placeholder
2.1. HTML Code head:
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easySlider1.7.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true
});
});
</script>
<link href="css/screen.css" rel="stylesheet" type="text/css" media="screen" />
2.1. HTML Code body:
<div id="slider">
<ul>
<li><a href="http://templatica.com/preview/30"><img src="images/01.jpg" alt="Css Template Preview" /></a></li>
<li><a href="http://templatica.com/preview/7"><img src="images/02.jpg" alt="Css Template Preview" /></a></li>
<li><a href="http://templatica.com/preview/25"><img src="images/03.jpg" alt="Css Template Preview" /></a></li>
<li><a href="http://templatica.com/preview/26"><img src="images/04.jpg" alt="Css Template Preview" /></a></li>
<li><a href="http://templatica.com/preview/27"><img src="images/05.jpg" alt="Css Template Preview" /></a></li>
</ul>
</div>
3. I copied the whole directory easyslider1.7 containing css, images, js and 3 html files into the my local directory E:\magix\index_htm_files\.
4. I preview the page in Webdesigner. All I can see are 5 boxes containing the text:
CSS template review.

What do I do wrong ??

Best,
Erde

[erde]

Thank you so much for that answer. I tried and tried but I have to admit that it's a bit
to advanced for my poor understanding

I did like this:
1. I opened a new document in webdesigner 7
2. I draw a rectangle and put into the placeholder
2.1. HTML Code head:
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easySlider1.7.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true
});
});
</script>
<link href="css/screen.css" rel="stylesheet" type="text/css" media="screen" />
2.1. HTML Code body:
<div id="slider">
<ul>
<li><a href="http://templatica.com/preview/30"><img src="images/01.jpg" alt="Css Template Preview" /></a></li>
<li><a href="http://templatica.com/preview/7"><img src="images/02.jpg" alt="Css Template Preview" /></a></li>
<li><a href="http://templatica.com/preview/25"><img src="images/03.jpg" alt="Css Template Preview" /></a></li>
<li><a href="http://templatica.com/preview/26"><img src="images/04.jpg" alt="Css Template Preview" /></a></li>
<li><a href="http://templatica.com/preview/27"><img src="images/05.jpg" alt="Css Template Preview" /></a></li>
</ul>
</div>
3. I copied the whole directory easyslider1.7 containing css, images, js and 3 html files into the my local directory E:\magix\index_htm_files\.
4. I preview the page in Webdesigner. All I can see are 5 boxes containing the text:
CSS template review.

What do I do wrong ??

Best,
Erde

[pauland]

Erde, I think you've now moved the files to a differrent place to where they were in the original html example.

If I am right..

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easySlider1.7.js"></script>

should now be

<script type="text/javascript" src="index_htm_files/js/jquery.js"></script>
<script type="text/javascript" src="index_htm_files/js/easySlider1.7.js"></script>

and

<link href="css/screen.css" rel="stylesheet" type="text/css" media="screen" />

should now be

<link href="index_htm_files/css/screen.css" rel="stylesheet" type="text/css" media="screen" />

and finally all the image paths need correction (I'll just do one):

<li><a href="http://templatica.com/preview/30"><img src="images/01.jpg" alt="Css Template Preview" /></a></li>

becomes

<li><a href="http://templatica.com/preview/30"><img src="index_htm_files/images/01.jpg" alt="Css Template Preview" /></a></li>

and repeat for the other images. It's important to remember that all paths are relative to where the html (your Xara page) sits.

Good luck!

Paul