Printable View
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:
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
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
You can easily do this in Xara using Flash - would you like me to show you?
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 ?
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.
Ok. Could you teach me how? I want to have a nice slider with 4-5 pictures. Effect similar like on :
http://cssglobe.com/lab/easyslider1.7/01.html
Thanks in advance. I appreciate it very much!
Best
Here's a simple image slider:
and the XAR file for you to inspect and dissect: Attachment 86129
Here's a simple image slider using transparency:
and the XAR file for you to inspect and dissect: Attachment 86130
Here's a simple image slider using image resize:
and the XAR file for you to inspect and dissect: Attachment 86131
The most important thing when inspecting the files is to click on the images and open the Name Gallery to see the name that has been applied to each image to ensure a smooth tween (movement) between the same image between two frames.
Have fun, inspect, dissect and create easy Flash animations using Xara Designer.
:thx
Thank you very much beretcascon for your help. Very good job !
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? 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
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 createQuote:
Originally Posted by jeb
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 imageQuote:
Originally Posted by jeb
:thx
It won't work on ANY iPhones/iPadsQuote:
Originally Posted by beretgascon
Yes, but a totally useless solution when the poster wants an iPhone/iPad friendly gallery.Quote:
You don't need any Flash programming experience to create simple Flash animations using Xara. It's really quite simple.
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" !
The link you provided shows the usage:Quote:
Originally Posted by erde
$(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
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
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
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
yeah, well, that's lifeQuote:
Originally Posted by pauland
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.