Variabele grootte van slideshow

Status
Niet open voor verdere reacties.
W

Wniq

Gebruiker
Lid geworden
10 jan 2013
Berichten
16
Ik wil een standaard manier om simpele slideshows op mijn web pagina's te plaatsen. Ik heb ergens wat van het net geplukt en in een test pagina gezet. Het werkt gewoon op m'n pc prima. Je kunt 't resultaat hier zien: http://www.frigge.nl/batavier/batavier.php

Op m'n iPad ziet het er echter niet uit, waarschijnlijk doordat de hoogte en breedte van de foto absoluut "moeten" worden opgegeven. Ik heb van alles al geprobeerd in onderstaande code, met name bij 't stukje

#slideshow {
margin-left:auto;
margin-right:auto;
position:relative;
height:570px;
width:858px;
}

maar tot op heden zonder het gewenste resultaat. De gehele code ziet er als volgt uit (het <style type="text/css"> gedeelte is inmiddels ondergebracht in mijn css-file frigge.css):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="nl">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Bewaking Afspraken Tracebesluit A4 - Batavier</title>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>

<link rel="stylesheet" type="text/css" href="../../../globalen/frigge.css">
</head>
<body>

<?php
$hoofd_menu_actief = "batavier" ;
$sub_menu_actief = "geen_submenu_actief" ;
;?>

<?php include '../menus/menu_knoppen.php'; ?>
<?php include '../menus/menu_hoofd.php'; ?>
<?php include '../menus/menu_batavier.php'; ?>

<div id="content">

<h2>
Stichting de Batavier
</h2>

<hr>
<br>

<h3>
Bewaking Afspraken Tracebesluit A4 - Batavier
</h3>
<br>

<p class = "tab1">
De pagina's over stichting de Batavier moeten nog gemaakt worden voor de versie 2.0
<br>
In versie 1.0 was de Batavier nog niet aanwezig, dus daar kunt u het ook niet vinden.
<br><br>
Hieronder alvast een zogenaamde tijdreeks aan foto's van de werkzaamheden hier in de buurt. De foto's zijn door de tijd heen genomen vanaf de Woudweg kijkend richting Schiedam en Vlaardingen.
<br><br>
Surf voor meer informatie naar de website van <a href = "http://www.stichtingbatavier.nl">stichting de Batavier</a>
</p>

<br>

<script type="text/javascript">
function slideSwitch() {
var $active = $('#slideshow div.active');
if ( $active.length == 0 ) $active = $('#slideshow div:last');
var $next = $active.next().length ? $active.next() : $('#slideshow div:first');
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 3000 );
});
</script>

<style type="text/css">
#slideshow {
margin-left:auto;
margin-right:auto;
position:relative;
height:570px;
width:858px;
}
#slideshow .slide {
position:absolute;
top:0;
left:20;
z-index:8;
opacity:0.0;
}
#slideshow div.active {
z-index:10;
opacity:1.0;
}
#slideshow div.last-active {
z-index:9;
}
</style>
<div id="slideshow">

<div class="slide active">
<img class = "displayed" src="http://www.frigge.nl/batavier/afbeeldingen/tijdreeks_001/tijdreeks_001_20091215_dsc_0051.jpg" alt="Slideshow Image 1" /></div>

<div class="slide">
<img src="http://www.frigge.nl/batavier/afbeeldingen/tijdreeks_001/tijdreeks_001_20101219_dsc_0079.jpg" alt="Slideshow Image 2" /></div>

etcetera tot en met slide 44

</div>

<br>
<hr>
<p class = "time">
© Copyright H.D. Frigge Schiedam 2010, 2011, 2012, 2013

</div>
</body>
</html>
 
Hoi Wniq,
Een maat voor de foto's moet weliswaar worden opgegeven, maar dat hoeft niet perse in pixels te zijn: het kan ook in %. :)

Wat je kunt doen:
  • Uit de #slideshow de height en de width schrappen (de margin-left en margin-right mogen er ook uit, maar de auto daarvan kan geen kwaad).
  • Verder toevoegen:
    Code: 
    #slideshow img {
    width: 100%;
    }
De foto's nemen dan 100% aan van de breedte van de <div> waar ze in zitten, en die <div> is via-via zo breed als de #content, die op 60% van de schermbreedte staat.
Gevolg:
  • De slider wordt altijd net zo breed als de inhoud-kolom, en past zich dus automatisch aan aan de schermbreedte.
  • Door geen hoogte op te geven, komt de hoogte altijd in de juiste verhouding tot de breedte (= de breedte/hoogte verhouding van het origineel).
Met vriendelijke groet,
CSShunter
 
Dank CSShunter,

Ik was een end op de goeie weg, maar hier was ik nog niet opgekomen. Maar ik denk dat ik ergens in de volgorde van het een en ander nog iets fout doe. Wat is namelijk 't geval. Ik had die margin-left en right erin gezet om de boel te centreren en dat werkte ook. Maar dat krijg ik nu weer niet voor elkaar. Ook heb ik onderaan een pagina altijd een grijze streep (<hr>) met daaronder een regel copyright en dergelijke. Op de een of andere manier krijg ik die ook niet lekker daar waar die staan moet. Ik denk dat ik op de een of andere manier iets fout doe met die divjes.

Groet,

Wniq
 
Hoi Wniq,
... centreren en dat werkte ook. Maar dat krijg ik nu weer niet voor elkaar.
Klik om te vergroten...
Als ik de pagina nu bekijk in Chrome, Firefox, Opera, Safari en Internet Explorer (7 t/m 10), dan gaat het centreren inmiddels goed.
  • Inderdaad moet de {margin-left:auto;} en {margin-right: auto} toegevoegd worden aan de #slideshow img {...} als de breedte daarvan niet op 100% staat.
=======
... onderaan een pagina altijd een grijze streep (<hr>) met daaronder een regel copyright en dergelijke. (...) niet lekker daar waar die staan moet.
Klik om te vergroten...
Ja, dat ligt aan de css voor de #slideshow-inhoud. De images hebben een absolute positie (om over elkaar heen te kunnen komen voor het faden), dan worden ze losgetrokken uit de "normal flow" van de verdere layout, en neemt de <div id="slideshow"> geen hoogte in.
  • Wat daarna komt, begint dan vrolijk op de hoogte van de top van de #slideshow.
  • En de <br>, de <hr> en de footer-regel komen daarna.
  • Omdat in de #slideshow met de stapeling van de lagen gewerkt is (de z-index), komt de #slideshow er dwars overheen.
Om de footer op z'n plaats te krijgen, moet deze niet buiten de #slideshow staan, maar erbinnen.
En wel: meteen onder een image (waarvan de hoogte flexibel is).
  • Hiervoor kan de <div> van het eerste image gebruikt worden: de volgende <div>'s voor de volgende images hebben weer de hoogte van de images, en de footer blijft dan onaangetast.
  • Het makkelijkst is om alles van de footer in een eigen <div id="footer"> te zetten, dan is de <br> niet nodig en kunnen de afstanden met css geregeld worden.
Zo kan het worden:
HTML: 
<div id="slideshow">
    <div class="slide active">
        <img class = "displayed" src="http://www.frigge.nl/batavier/tijdreeksen/tijdreeks_001/tijdreeks_001_20091215_dsc_0051.jpg" alt="Slideshow Image 1" />
        <div id="footer">
            <hr>
            <p class="time">&copy; Copyright H.D. Frigge Schiedam 2010, 2011, 2012, 2013</p>
        </div>
    </div>
    <div class="slide">
        <img src="http://www.frigge.nl/batavier/tijdreeksen/tijdreeks_001/tijdreeks_001_20101219_dsc_0079.jpg" alt="Slideshow Image 2"  />
    </div>
    ... enz.
</div>
</body>
</html>
Met in de css:
Code: 
#footer {
    padding: 15px 0; 
}
- Je zou de #footer nog een {text-align: center;} kunnen geven, dan staat de copyright-regel mooi in het midden onder de foto's.

Met vriendelijke groet,
CSShunter
 
Wederom dank CSShunter,

het gaat er steeds beter uitzien. Echter, dat het een en ander gecentreerd staat is denk ik maar schijn. Ik dacht dat het op de pc van m'n vrouw (IE8) wel goed ging en op mijn pc (IE10) niet, maar dat kom doordat het scherm van m'n vrouw op 125% staat. Zoom ik ook naar 125% dan staat het ook netjes gecentreerd.

Op de i-Pad heb ik af en toe gezien dat de eerste twee foto's heel klein zijn, maar wellicht is dat als vanzelf opgelost. Ik zie het nu in ieder geval niet meer.

De copyright-regel komt nu ook op de goede plek. Ik heb daardoor wel gemerkt dat na de eerste foto de tekst verdwijnt. Na de tweede en latere foto's blijft hij staan. Op zich geen probleem, maar ik wil eigenlijk ook de datum onder de foto's zetten. Dat lukt dus bij foto 1 en 2, maar daarna gaat hij de datums over elkaar heen schrijven. (Ik denk echter dat dit geregeld moet worden in het Javascript en niet in CSS.)

Groet,

Wniq
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan