mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 09.07.2020 01:14 Benutzername: Passwort: Auto-Login

Thema: Easyslider in Webseite einbinden... vom 30.03.2011


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Easyslider in Webseite einbinden...
Autor Nachricht
yazzc
Threadersteller

Dabei seit: 18.11.2007
Ort: -
Alter: -
Geschlecht: -
Verfasst Mi 30.03.2011 12:24
Titel

Easyslider in Webseite einbinden...

Antworten mit Zitat Zum Seitenanfang

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 ... *Schnief*


Zuletzt bearbeitet von yazzc am Mi 30.03.2011 12:24, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
snuwie

Dabei seit: 06.07.2010
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mi 30.03.2011 12:31
Titel

Antworten mit Zitat Zum Seitenanfang

Dafür braucht man nicht wirklich Ahnung von Javascript. *zwinker* 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
  View user's profile Private Nachricht senden
Anzeige
Anzeige
monika_g

Dabei seit: 23.01.2006
Ort: Hamburg
Alter: -
Geschlecht: Weiblich
Verfasst Mi 30.03.2011 12:32
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
yazzc
Threadersteller

Dabei seit: 18.11.2007
Ort: -
Alter: -
Geschlecht: -
Verfasst Mi 30.03.2011 12:48
Titel

Antworten mit Zitat Zum Seitenanfang

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 Lächel
  View user's profile Private Nachricht senden
snuwie

Dabei seit: 06.07.2010
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mi 30.03.2011 13:06
Titel

Antworten mit Zitat Zum Seitenanfang

yazzc hat geschrieben:
jetzt muss ich nur noch schauen, wie ich die Größe anpassen kann


Ich hoffe dir sagt css was Lächel
  View user's profile Private Nachricht senden
Ritti1989

Dabei seit: 22.04.2013
Ort: -
Alter: 30
Geschlecht: Männlich
Verfasst Mo 22.04.2013 16:52
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen Sound in Webseite einbinden
Webseite in E-Mail einbinden
Video einbinden in Webseite
pdf in Webseite einbinden
kleinen Texteditor in Webseite einbinden
Dreamreaver -> FLV in webseite einbinden -> ?
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.