| Autor |
Nachricht |
yazzc
Threadersteller
Dabei seit: 18.11.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mi 30.03.2011 12:24
Titel Easyslider in Webseite einbinden... |
  |
|
Hallo zusammen,
ich habe mir den Easyslider 1.7 heruntergeladen http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider und würde ihn nun gerne in meine Webseite einbinden, bekomme es aber gerade überhaupt nicht hin. Da ich noch nie mit Javascript gearbeitet habe stehe ich jetzt also da wie der Ochs vorm Berg.
Kann mir jemand sagen, was genau ich tun muss? Es soll eigentlich sehr einfach sein ... 
Zuletzt bearbeitet von yazzc am Mi 30.03.2011 12:24, insgesamt 1-mal bearbeitet
|
|
| |
  |
 |
snuwie
Dabei seit: 06.07.2010
Ort: -
Alter: -
Geschlecht: 
|
Verfasst Mi 30.03.2011 12:31
Titel
|
|
|
Dafür braucht man nicht wirklich Ahnung von Javascript.  Hast du denn schon einen Ansatz? Hast du schon mal den Quelltext der Beispiele angeschaut?
Erstmal musst du im Head Bereich die entsprechenden Scripte laden:
| Code: |
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easySlider1.7.js"></script>
|
Dann musst du den Slider definieren:
| Code: |
<script type="text/javascript">
$(document).ready(function(){
$("#hier-deine-slider-id").easySlider({
auto: true,
continuous: true
});
});
</script>
|
Und natürlich dein HTML Markup nicht vergessen:
| Code: |
<div id="hier-deine-slider-id">
<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> |
Zuletzt bearbeitet von snuwie am Mi 30.03.2011 12:32, insgesamt 1-mal bearbeitet
|
|
| |
|
|
|
Anzeige
|
|
|
monika_g
Dabei seit: 23.01.2006
Ort: Hamburg
Alter: -
Geschlecht: 
|
Verfasst Mi 30.03.2011 12:32
Titel
|
|
|
Du solltest vielleicht mal Deine Versuche posten ,also auf einen Server laden und den Link posten.
Zuletzt bearbeitet von monika_g am Mi 30.03.2011 12:32, insgesamt 1-mal bearbeitet
|
|
| |
 |
|
yazzc
Threadersteller
Dabei seit: 18.11.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mi 30.03.2011 12:48
Titel
|
|
|
Danke, ich habs gerade gecheckt... jetzt muss ich nur noch schauen, wie ich die Größe anpassen kann, vielleicht kommen dann nochmal Fragen... vorhanden ist der Slider jetzt auf jeden Fall erstmal 
|
|
| |
|
|
snuwie
Dabei seit: 06.07.2010
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mi 30.03.2011 13:06
Titel
|
|
|
| yazzc hat geschrieben: | | jetzt muss ich nur noch schauen, wie ich die Größe anpassen kann |
Ich hoffe dir sagt css was
|
|
| |
|
|
Ritti1989
Dabei seit: 22.04.2013
Ort: -
Alter: 34
Geschlecht:
|
Verfasst Mo 22.04.2013 16:52
Titel
|
|
|
Hallo,
bei mir funktioniert der "nach Links" Button nicht.
Habe den EasySlider im HTML Head wie folgt aufgerufen:
| Code: | <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();
});
</script> |
An der Stelle, wo der Slider eingebunden wird, habe ich die Position der Links/Rechts Buttons verändert und den Text gegen eine Grafik ersetzt.
| Code: | <div id="slider" style="width: 280px; height: 200px; overflow: hidden;">
<span id="prevBtn">
<a href="javascript:void(0);"><img src="/img/slider_pfeil_links.png" alt="zurück"></a>
</span>
<ul style="width: 840px;">
<li style="margin-left: -280px; float: left;">
<div class="NewsSliderLink">
<li style="float: left;">
<div class="NewsSliderLink">
<a href="/infektionskrankheiten/" title="Infektionskrankheiten">Infektionskrankheiten</a>
</div>
<div class="NewsSliderEntry">
<div class="newspic">
<img src="/blog_klein_infektionskrankheiten.jpg" width="190" height="120" alt="Infektionskrankheiten">
<div class="NewsSliderMorelink">
<a href="/infektionskrankheiten/" title="Infektionskrankheiten">lesen ...</a>
</div>
</div>
</div>
</li>
<li style="float: left;">
<div class="NewsSliderLink">
<a href="/erbkrankheiten/" title="Erbkrankheiten">Erbkrankheiten</a>
</div>
<div class="NewsSliderEntry">
<div class="newspic">
<img src="/blog_klein_erbkrankheiten.jpg" width="190" height="120" alt="Erbkrankheiten">
<div class="NewsSliderMorelink">
<a href="/erbkrankheiten/" title="Erbkrankheiten">lesen ...</a>
</div>
</div>
</div>
</li></ul>
<span id="nextBtn">
<a href="javascript:void(0);"><img src="/img/slider_pfeil_rechts.png" alt="weiter"></a></span>
</div> |
CSS:
| Code: | #prevBtn {
float: left;
position: absolute;
left: 10px;
top: 75px; }
#nextBtn {
float: right;
position: absolute;
top: 75px;
right: 10px;} |
Das Problem ist bei mir, das der "nextBtn" funktioniert, der "prevBtn" Allerdings nicht.
Ich hoffe, ihr könnt mir helfen.
bg
Toni
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
pdf in Webseite einbinden
Dreamreaver -> FLV in webseite einbinden -> ?
Webseite in E-Mail einbinden
Sound in Webseite einbinden
Video einbinden in Webseite
mms-stream mit Player in Webseite einbinden
|
|
Willkommen auf dem Portal für Mediengestalter
