Ergebnis 1 bis 3 von 3

Thema: Text neben Slideshow anzeigen lassen

  1. #1
    HTML Newbie
    Registriert seit
    22.05.2013
    Beiträge
    2
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Text neben Slideshow anzeigen lassen

    Erstmal hallo an alle! Dies ist mein erster "Beitrag", ich bin auch ein totaler Neuling was Programmieren angeht; ich bin dran, ein Page für ein kleines Cafe zu machen und habs endlich geschafft, ne Slideshow hinzukriegen, allerdings noch folgende Probleme:

    -wie kann ich die Slideshow an eine bestimmte Position auf der Site positionieren? (im moment ist sie ja einfach oben links)

    -wie kann ich auf der Seite der Slideshow Fliesstext anzeigen lassen?

    ich hatte das Script der Slideshow in das der Page eingefügt, aber dann haben sich Script und Hintergrundbild einfach überlappt, das bringt mir leider auch nichts im Notfall könnte ich das Hintergrundbild aber auch rausnehmen
    Vielen Dank schon im Voraus!
    Das Script der Page ist folgendes:
    -----------------------------------------------------------
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <HTML>
    <head>
    <title>Cafe Gruebi, Home</title>
    <meta charset="UTF-8">



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

    <style type="text/css">
    html, body {
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    overflow:hidden;
    }

    body {
    font-family:sans-serif;
    }

    #hintergrund {
    position:absolute;
    width:100%;
    height:100%;
    z-index:1;
    }

    #scrollbereich {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    overflow:auto;
    z-index:2;
    }

    #inhalt {
    padding:20px 100px 30px 200px;
    z-index:2;
    }

    </style>


    </head>


    <body>

    <div>
    <img id="hintergrund" src="../img/backgroundpng.png" alt="" title=""
    style="filter:alpha(opacity=75); -moz-opacity: 0.75; opacity: 0.75;" />

    </div>

    <div id="scrollbereich">
    <div id="inhalt">


    <table>
    <tr>
    <th> <a href="../home/home.html">Home</a> </th>
    <th> <a href="../Speisekarte/Speisekarte.html">Speisekarte</a> </th>
    <th> <a href="../Lageplan/Lageplan.html">Lageplan</a> </th>
    <th> <a href="../Kontakt/Kontakt.html">Kontakt</a> </th>
    <th> <a href="../Links/Links.html">Links</a> </th>
    </tr>
    </table>


    <hr>






    <p> Wir sind ein junges Team, welches das Cafe Gruebi auf die Wintersaison 2012/2013 übernommen hat; wir führen das Cafe
    mit grossem Engagement und Freude und würden uns freuen, Sie bei uns begrüssen zu dürfen! Unsere Spezialitäten sind
    eine Fülle von hausgemachten Kuchen, dazu servieren wir Ihnen sehr gerne unseren feinen Kaffee oder selbstgemachten Glühwein.
    Unser Service-Team ist stets aufgeschlossen und geniesst den Kontakt mit den Gästen aus der ganzen Welt.
    Wir verwenden ausschliesslich frische Zutaten, welche wir sorgfältig und liebevoll zu leckeren Gerichten verarbeiten. Bitte überzeugen Sie sich
    selbst von unserer Qualität!
    </p>

    <br>
    <p>Wir haben wie folgt geöffnet:</p>

    <table>
    <tr>
    <th>
    Montag-Samstag</th>
    <th>Sonntag</th>
    </tr>
    <tr>
    <th>
    08.30 - 18.00</th>
    <th>
    12.00 - 18.00</th>
    </tr>
    </table>


    </div>
    </div>





    </body>
    </HTML>

    ---------------------------------------------------------

    Script der Slideshow:
    ---------------------------------------------------------
    <div class="clear"><style type="text/css">
    <!--

    .clear {clear:both;}

    #gallery {position:relative; height: 360px; }

    #gallery a {float:left; position:absolute; }

    #gallery a img {border:none;}

    #gallery a.show {z-index:500;}

    #gallery .caption {
    z-index: 600;
    background-color: #000;
    color: #fff;
    height: 100px;
    width: 100%;
    position: absolute;
    bottom: 0; }

    #gallery .caption .content {margin:5px;}

    #gallery .caption .content h3 {margin:0; padding:0; color:#1DCCEF; }
    --> </style><script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script><script type="text/javascript">
    $(document).ready(function() {

    //Execute the slideShow
    slideShow();

    });

    function slideShow() {

    //Set the opacity of all images to 0
    $('#gallery a').css({opacity: 0.0});

    //Get the first image and display it (set it to full opacity)
    $('#gallery a:first').css({opacity: 1.0});

    //Set the caption background to semi-transparent
    $('#gallery .caption').css({opacity: 0.7});

    //Resize the width of the caption according to the image width
    $('#gallery .caption').css({width: $('#gallery a').find('img').css('width')});

    //Get the caption of the first image from REL attribute and display it
    $('#gallery .content').html($('#gallery a:first').find('img').attr('rel'))
    .animate({opacity: 0.7}, 400);

    //Bilderwechsel Zeit 4000 = 4 sekunden
    setInterval('gallery()',4000);

    }

    function gallery() {

    //if no IMGs have the show class, grab the first image
    var current = ($('#gallery a.show')? $('#gallery a.show') : $('#gallery a:first'));

    //Get next image, if it reached the end of the slideshow, rotate it back to the first image
    var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first'));

    //Get next image caption
    var caption = next.find('img').attr('rel');

    //Set the fade in effect for the next image, show class has higher z-index
    next.css({opacity: 0.0})
    .addClass('show')
    .animate({opacity: 1.0}, 1000);

    //Hide the current image
    current.animate({opacity: 0.0}, 1000)
    .removeClass('show');

    //Set the opacity to 0 and height to 1px
    $('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 });

    //Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect
    $('#gallery .caption').animate({opacity: 0.7},100 ).animate({height: '100px'},500 );

    //Display the content
    $('#gallery .content').html(caption);

    }

    </script>
    <div id="gallery">

    <a class="show" >
    <img title="Gruebi im Sommer" alt="Content 1" width="580" height="360" rel="&lt;h3&gt;Cafe Gruebi im Sommer&lt;/h3&gt;Beschreibung" src="Slideshow/bild1.jpg" />
    </a>
    <a>
    <img title="" alt="Content 2" width="580" height="360" rel="&lt;h3&gt;Eingang Cafe Gruebi&lt;/h3&gt;Beschreibung" src="Slideshow/bild2.jpg" />
    </a>
    <a>
    <img title="" alt="Content 3" width="360" height="580" rel="&lt;h3&gt;Cafe Gruebi im Winter&lt;/h3&gt;Beschreibung" src="Slideshow/bild3.jpg" />
    </a>
    <a>
    <img title="" alt="Content 4" width="580" height="360" rel="&lt;h3&gt;Unsere Speisekarte&lt;/h3&gt;Beschreibung" src="Slideshow/bild4.jpg" />
    </a>
    <div class="caption">
    <div class="content">&nbsp;</div>
    </div>
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: Text neben Slideshow anzeigen lassen

    kannst du das bitte mal als link verfügbar machen?
    nimm dir irgendeinen freespace und lads dort bitte hoch (bplaced, ohost, etc)

    grundlegend ist es so, dass du deinem container für die slideshow per css eine positionierung geben kannst.

    das geht dann "via code", weil du andere elemente ebenfalls positionierst oder auch mit absoluter positionierung (wovon ich abrate wenn du neuling bist)

    schau dir bei css4you.de mal das boxmodell an
    dann musst du nur noch wissen, ob du block-elemente hast oder inline-elemente und danach kannst du deine container nach lust und laune positionieren
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    22.05.2013
    Beiträge
    2
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Text neben Slideshow anzeigen lassen

    hmm, danke für deine antwort, ich konnte irgendwie aber nichts uploaden auf bplaced; ich werds bald direkt auf der website uploaden, die das Cafe reserviert hat, und dann post ichs hier nochmal
    css4you bin ich am anschauen, gute seite

Ähnliche Themen

  1. Um bestimmte Uhrzeit Text anzeigen lassen
    Von !Florian im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 4
    Letzter Beitrag: 28.08.2010, 12:43
  2. Text mit Php ab bestimmten Datum anzeigen lassen.
    Von Cenarius im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 2
    Letzter Beitrag: 15.06.2009, 15:38
  3. Text nach Formular abschicken über diesem anzeigen lassen
    Von zahlenmeer im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 9
    Letzter Beitrag: 03.08.2008, 14:43
  4. Text neben Bild
    Von Neverdead im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 13.10.2007, 12:58
  5. Text in der Mitte anzeigen lassen
    Von PC-Friends.de im Forum HTML & CSS Forum
    Antworten: 12
    Letzter Beitrag: 12.04.2007, 11:34

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •