Re: create easy Flash animations using Xara Designer
Quote:
Originally Posted by
jeb
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
Quote:
Originally Posted by
jeb
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
:thx
Re: How do I integrat a slider in web designer 7 ?
Quote:
Originally Posted by
beretgascon
Flash will not work on earlier iphone/ipads, which is a shame, but never mind.
It won't work on ANY iPhones/iPads
Quote:
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" !
Re: How do I integrat a slider in web designer 7 ?
Quote:
Originally Posted by
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 :rolleyes:
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
Re: How do I integrat a slider in web designer 7 ?
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 :eek:
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
Re: How do I integrat a slider in web designer 7 ?
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 :eek:
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
Re: How do I integrat a slider in web designer 7 ?
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
Re: How do I integrat a slider in web designer 7 ?
Quote:
Originally Posted by
pauland
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
Re: How do I integrat a slider in web designer 7 ?
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.