How do I integrat a slider in web designer 7 ?

[Big Frank]

Beret, few - none - of the pics I would want to use are long and narrow - is there a way to change the shape and still use this slider?

of course, there are no size/dimension limitations apart from from those that you yourself impose. just change the shape of the underlying page (drag the right-hand and bottom page edges) to suit the size of the flash slider you wish to create

Since this puts one pic on top of the other, if one uses a different shape pic how does one keep part of the pic from below showing if the one on top is a different shape? - jb

that's really a question of design and elegance, sliding a landscape image over a portrait image is inherently inelegant, even ugly (i'm sure there are exceptions, but not many). it is better to take a landscape crop from a portrait image and use the crop to slide over a landscape image

[pauland]

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

It won't work on ANY iPhones/iPads

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

Yes, but a totally useless solution when the poster wants an iPhone/iPad friendly gallery.

Beretgascon - my post sounds a little harsh - I know you were being helpful and it's good advice, though not for something starting with "i" !

[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

[Big Frank]

Beretgascon - my post sounds a little harsh - I know you were being helpful and it's good advice, though not for something starting with "i" !

yeah, well, that's life

[Abikadabra]

The tile effect slideshow eyecatcher in WD7P works on my iphone and ipad?!? Maybe you could use that Erde if you want a flash effect that works on ips.