Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „probleme mit jquery“

susiH

Aktives Mitglied

hi,
ich möchte auf meiner startseite eine jquery slideshow einbinden. das problem ist aber, das nur ein smaler streifen des bildes angezeigt wird und auch nur ein einziges bild, obwohl mehrere bilder eingebunden sind. außerdem sollen die bilder in der höhe immer bildschirmfüllend sein, aber die werden immer zu groß angezeigt.

hier mal der html code
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<link rel="stylesheet" type="text/css" href="style.css">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>artdreamers</title>

<!-- slider -->
<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>
<!-- ende slider -->
<link href='http://fonts.googleapis.com/css?family=Puritan:regular,italic,bold,bolditalic' rel='stylesheet' type='text/css'>
</head>
<body>

<div id="container">
<div id="content">
<div id="slider">
<ul>
<li><img src="bilder/7.jpg" /></li>
<li><img src="bilder/8.jpg" /></li>
<li><img src="bilder/9.jpg" /></li>
<li><img src="bilder/10.jpg" /></li>
</ul>
</div><!-- slider -->
</div> <!-- content -->
</div> <!-- container -->


<div id="menu">
    <div id="slidemenu">
            <div class="titel"><a href="#">shootings</a></div>
                <div class="links"><a href="#">name</a></div>
                <div class="links"><a href="#">name</a></div>
                <div class="links"><a href="#">name</a></div>
                <div class="links"><a href="#">name</a></div>
                <div class="links"><a href="#">name</a></div>
                <div class="links"><a href="#">name</a></div>
                <div class="links"><a href="#">name</a></div>
            <div class="titel"><a href="#">grafikdesign</a></div>
                <div class="links"><a href="#">name</a></div>
                <div class="links"><a href="#">name</a></div>
                <div class="links"><a href="#">name</a></div>
                <div class="links"><a href="#">name</a></div>
                <div class="links"><a href="#">name</a></div>
                <div class="links"><a href="#">name</a></div>
                <div class="links"><a href="#">name</a></div>
    </div>
</div>




</body>
</html>

und die css
HTML:
html, body
    {
    font-family: 'Puritan', arial, serif;
    width:100%;
    height:100%;
    background-color:#ffffff;
    margin: 0;
    padding: 0;
    overflow: hidden;
    }
img
    {
    border:0;
    }
    
#menu
    {
    position:fixed;
    top:250px;
    padding:25px;    
    width:100px;
    height:auto;
    background-color:#FFF;
    opacity:.7;
    z-index:100;
    }
    
#slidemenu
    {
    color:#333;    
    }
    
.links
    {
    margin-left:25px;
    font-size:14px;
    line-height:1.5;
    }
    
.links a:link    
    {
    color:#333;
    text-decoration:none;
    }

.links a:active    
    {
    color:#33cc33;
    text-decoration:none;
    }

.links a:hover    
    {
    color:#33cc33;
    text-decoration:none;
    }

.links a:visited    
    {
    color:#333;
    text-decoration:none;
    }
    
.titel
    {
    margin-top:10px;
    }
    
.titel a:link    
    {
    color:#333;
    text-decoration:none;
    }

.titel a:active    
    {
    color:#33cc33;
    text-decoration:none;
    }

.titel a:hover    
    {
    color:#33cc33;
    text-decoration:none;
    }

.titel a:visited    
    {
    color:#333;
    text-decoration:none;
    }
    
        
#container
    {    
    width:100%;
    height:100%;
    margin: 0;
    padding: 0;
    position:relative;
    text-align:left;
    background:#fff;
    z-index:1;        
    }    
    
#content    
    {
    z-index:2;
    }
    
#slider ul, #slider li,
    {
    margin: 0;
    padding: 0;
    list-style:none;
    z-index:3;        
    }
    
#slider li
    { 
       width:100%;
    height:100%;
    margin: 0;
    padding: 0;
    overflow:hidden; 
    z-index:4;        
    }    
    
#prevBtn, 
    {
    display:block;
    vertical-align:middle;
    position:absolute;
    left:50px;
    z-index:1000;
    }    

#nextBtn
    {
    display:block;
    position:absolute;
    right:50px;
    vertical-align:middle;
    z-index:1000;
    }

danke schon mal für eure mühe
 

rockscientist01

Nicht mehr ganz neu hier

AW: probleme mit jquery

ich hab auch den easySlider 1.7 auf einer site von mir, vielleicht hilft Dir der quelltext weiter

wenn du einen link zu deiner site postest, kann ich da auch mal schauen.

Gruß
AO
 

michas

Nicht mehr ganz neu hier

AW: probleme mit jquery

Du verwendest jQuery 1.2.3 als Version.

Bitte aktualisiere mal auf eine neuere :)

Desweiteren musste Du meines Wissens nach das slow in Hochkommas setzten. Es sei denn, Du hast es irgendwo als Variable definiert.
Code:
$('#slidemenu').animate({width:'toggle'},'slow');

Und noch was: Das Blockelement "div" ist nicht zulässig innerhalb von "ul" oder "ol".

Versuche es doch mal eher so
Code:
<div id="container">
<div id="content">
<div id="slider">
<ul>
<li><img src="bilder/7.jpg" /></li>
<li><img src="bilder/8.jpg" /></li>
<li><img src="bilder/9.jpg" /></li>
<li><img src="bilder/10.jpg" /></li>
</ul>

</div><!-- slider -->
</div> <!-- content -->
</div> <!-- container -->

Gruß
 
Zuletzt bearbeitet:

susiH

Aktives Mitglied

AW: probleme mit jquery

ähm, ich hab doch garkein slidemenu drin...
der slider für die bilder ist eiegtnlich der hier
HTML:
<!-- slider -->
<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>
<!-- ende slider -->


das slidemenu soll mal das menu auf der linken seite werden. das habe ich bisher nur schon mal angelegt.
 

michas

Nicht mehr ganz neu hier

AW: probleme mit jquery

Ja, kann sein, dass es noch nicht drin ist, der Fehler ist es aber. :)

Nun zu Deinem Slider-Problem.
Wenn Du Deine Listen Elemente aus 100% breite per CSS stylest, dann nehmen Sie natürlich die Gesamtbreite des Elternelementes an. Wie sollen die da noch sliden können?

Entferne mal die Eigenschaft width : 100% aus Deiner Style.css Datei.

Gruß Micha
 

susiH

Aktives Mitglied

AW: probleme mit jquery

also funktioniert es schon besser... ich habs nochmal neu hochgeladen, falls du noch mal drübergucken willst/kannst :(
 

susiH

Aktives Mitglied

AW: probleme mit jquery

und diese schusselfehler sind es, die es alles kaputt machen :(
weißt du vielleicht auch, wie ich es hinkriege, dass die bilder immer auf bildschirmhöhe angepasst werden?? und immer nur ein bild auf dem bildschritm zu sehen ist??
 

michas

Nicht mehr ganz neu hier

AW: probleme mit jquery

Leider habe ich diese Woche keine Zeit mehr, mir das anzuschauen.

Wenn ich nächste Woche ein paar freie Minuten finde, kann ich Dir sicher eine Lösung nennen. Allerdings solltest Du bei der Aufgabenstellung eher auf ein fixes Seiten-Layout setzten. Sonst wirds ngleich komplizierter.

Gruß Micha
 

michas

Nicht mehr ganz neu hier

AW: probleme mit jquery

Also ich habe es mir noch einmal angesehen.
Folgendes:
1. bei dem letzten Link ist immer noch nur ein <li> tag um alle Bilder
2. Anpassung der Bilder an den Bildschirm geht bei fließenden Layout eigentlich nicht schön. (Da jeder Bildschirm anderen Größen / Seitenverhältnisse hat) ich bspw. sitze an einem 24Zoll Bildschirm. Da müssten die Bilder schon verdammt groß sein, damit nur "nur ein bild auf dem bildschritm zu sehen ist".

Ergo: Definiere ein fixes Layout (oder einen fixen Bereich) in dem die Slideshow stattfinden soll. Anschließend kann ich Dir da helfen.

Gruß Micha
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
175.143
Beiträge
2.581.734
Mitglieder
67.208
Neuestes Mitglied
docschweitzer
Oben