slideshow in plaats van één afbeelding

Nvu, Kompozer en Bluegriffon zijn open source (WYSIWYG) programma's waarmee je een website kunt maken en onderhouden (vergelijkbaar met FrontPage / Dreamweaver).
teaktime
Berichten: 2
Lid geworden op: 4 november 2010, 16:03
    Windows Vista Firefox

slideshow in plaats van één afbeelding

Bericht door teaktime »

op een pagina van m'n website wil ik een tiental artikelen zetten elk met 2 a 5 foto's.
de foto's zijn allemaal dezelfde grootte.
kan iemand me uitleggen welke html code of scriptje ik moet gebruiken om een kader waar ik normaal gezien een foto zou plaatsen een html code kan invoegen die de 2 à 5 foto's gaat tonen in een soort mini diavoorstellingske.
ik gebruikte de image slideshow generator die code aanmaakt. Dat werkt voortreffelijk maar probleem is dat van zodra ik er meer dan één op m'n pagina zet het spaak loopt.
de code die ik via die generator kreeg is :
<!-- configurable script -->
<script type="text/javascript">
theimage = new Array();


// The dimensions of ALL the images should be the same or some of them may look stretched or reduced in Netscape 4.
// Format: theimage[...]=[image URL, link URL, name/description]
theimage[0]=["http://www.teaktime.be/soldenimages/lin1.jpg", "", ""];
theimage[1]=["http://www.teaktime.be/soldenimages/lin2.jpg", "", ""];
theimage[2]=["http://www.teaktime.be/soldenimages/lin3.jpg", "", ""];
theimage[3]=["http://www.teaktime.be/soldenimages/lin4.jpg", "", ""];
theimage[4]=["http://www.teaktime.be/soldenimages/lin5.jpg", "", ""];

///// Plugin variables

playspeed=3000;// The playspeed determines the delay for the "Play" button in ms
//#####
//key that holds where in the array currently are
i=0;


//###########################################
window.onload=function(){

//preload images into browser
preloadSlide();

//set the first slide
SetSlide(0);

}

//###########################################
function SetSlide(num) {
//too big
i=num%theimage.length;
//too small
if(i<0)i=theimage.length-1;

//switch the image
document.images.imgslide.src=theimage[0];

//if they want name of current slide
document.getElementById('slidebox').innerHTML=theimage[2];

}


//###########################################
function PlaySlide() {
if (!window.playing) {
PlayingSlide(i+1);
if(document.slideshow.play){
document.slideshow.play.value=" Stop ";
}
}
else {
playing=clearTimeout(playing);
if(document.slideshow.play){
document.slideshow.play.value=" Play ";
}
}
// if you have to change the image for the "playing" slide
if(document.images.imgPlay){
setTimeout('document.images.imgPlay.src="'+imgStop+'"',1);
imgStop=document.images.imgPlay.src
}
}


//###########################################
function PlayingSlide(num) {
playing=setTimeout('PlayingSlide(i+1);SetSlide(i+1);', playspeed);
}


//###########################################
function preloadSlide() {
for(k=0;k<theimage.length;k++) {
theimage[k][0]=new Image().src=theimage[k][0];
}
}


</script>


<!-- slide show HTML -->
<form name="slideshow">

<table border="1" cellpadding="2" cellspacing="0">
<tr>
<td align="center">
<a href="#" onmouseover="this.href=theimage[1];return false">
<script type="text/javascript">
document.write('<img name="imgslide" id="imgslide" src="'+theimage[0][0]+'" border="0">')
</script>
</a>
</td>
</tr>
<tr>
<td align="center"><div id="slidebox"></div></td>
</tr>
<tr>
<td align="center">
<input type="button" value="I<<" onclick="SetSlide(0);" title="Jump to starting image">
<input type="button" value="<<" onclick="SetSlide(i-1);" title="Previous image">
<input type="button" name="play" value=" Play " onclick="PlaySlide();" title="Autoplay">
<input type="button" value=">>" onclick="SetSlide(i+1);" title="Jump to next image">
<input type="button" value=">>I" onclick="SetSlide(theimage.length-1);" title="Jump to ending image">
</td>
</tr>
</table>

</form>
<!-- end of slide show HTML -->
Gebruikersavatar
nirwana
Beheerder
Berichten: 11423
Lid geworden op: 19 september 2003, 5:09
    Windows 7 Firefox

Re: slideshow in plaats van één afbeelding

Bericht door nirwana »

Teaktime,

Allereerst welkom hier op het forum.

Je moet me toch even vertellen wat er niet goed werkt aan dit script.
Ik heb het wat aangevuld, zodat het op een volledig HTML-document lijkt:
http://www.mozbrowser.nl/web/teaktime/slideshow.html

En ik zou toch zeggen dat alles daar netjes werkt.
Dan vraag ik me af of jij in jouw website misschien iets anders hebt gedaan.
Met vriendelijke groet,

Martijn
[ Mede-oprichter + webmaster MozBrowser | beheerder Startpagina's over freeware, GIMP, Mozilla en OpenOffice.org / LibreOffice, Ubuntu
teaktime
Berichten: 2
Lid geworden op: 4 november 2010, 16:03
    Windows Vista Firefox

Re: slideshow in plaats van één afbeelding

Bericht door teaktime »

thx voor uw spoedig antwoord.
idd, het werkt heel goed. Maar !
ik beheer m'n site met easy bussiness tool (programma die voor mij althans) heel voortreffelijk werkt en waar ik vrij makkelijk artikelen ed kan bijvoegen.
doch, daar ik nog niet volledig klaar ben met alles heb ik de mogelijkheid om een extra bladzijde te maken.
(bvb, ik wil de prijzen van alle artikelen pas tonen aan ingelogde en geregistreerde klanten) en dit kan ik in dat programma aan of uit vinken
wat ik zou willen doen nu is bepaalde artikelen in de kijker zetten. Ook daarvoor heeft dat programma een mogelijkheid 'aanbiedingen' doch niet ingelogd krijg je deze niet te zien.
voor mij zat er dus voorlopig niets anders op dan een extra pagina te maken die ik los van de webwinkel kan aanpassen.
die bladzijde is (verkoop toonzaalmodellen) op m'n site.
de bedoeling is dat op die bladzijde 10 artikels staan (die kan ik dan gebruiken om om het even welk item in de kijker te zetten.)
van ieder artikel een foto, omschrijving en eventueel 'i like button', buy now button, mail for more info, ...
daar ik van een aantal artikelen meerdere foto's heb wou ik dat ipv één foto op die pagina staat er een soort slideshow afspeelt
met één x die code te importeren in mijn html programma en dan die html code te plakken in easy bussiness tool werkte dat perfect
maar van zodra er meerder js op staan, niet meer.
het ideale zou zijn : iets in die aard : http://visuallightbox.com/lightbox-mac-style-demo.html
met andere woorden : een foto naast omschrijving ed en op die foto een plus tekentje waardoor de mensen automatisch de 2,3 of 4 extra foto's in het groot zien (in een apart venster die oplicht en enkel kan gesloten worden)
Gebruikersavatar
nirwana
Beheerder
Berichten: 11423
Lid geworden op: 19 september 2003, 5:09
    Windows 7 Firefox

Re: slideshow in plaats van één afbeelding

Bericht door nirwana »

Als ik het goed begrijp dan gaat het dus niet lekker samen met andere Javascripts. Daar kan ik me op zich iets bij voorstellen, want je kunt doorgaans niet alles bij elkaar plaatsen zonder je druk te maken over wat de verschillende scripts met de pagina doen.

Je maakt het voor een bedrijf, dus dan is Visual Lightbox een minder handige keuze (of je moet hier 49 dollar aan willen uitgeven).

Ik denk dat we het beste voor een component op basis van jQuery kunnen gaan.
Dit is ongeveer de lightbox zoals jij die voorstelt: http://leandrovieira.com/projects/jquer ... x/#example

Dit is een andere uitvoering: http://sandbox.leigeber.com/javascript-slideshow/
Code + uitleg: http://www.leigeber.com/2008/12/javascript-slideshow/
Wel zul je dan zelf ook thumbnail-afbeeldingen moeten genereren, maar ook daarvoor zijn gratis programma's beschikbaar (ImageMagick comes to mind).

Hier staan overigens nog meer voorbeelden op basis van jQuery: http://blueprintds.com/2009/01/20/top-1 ... y-plugins/
Met vriendelijke groet,

Martijn
[ Mede-oprichter + webmaster MozBrowser | beheerder Startpagina's over freeware, GIMP, Mozilla en OpenOffice.org / LibreOffice, Ubuntu
Wesso
Berichten: 14
Lid geworden op: 15 januari 2011, 17:01
    Windows 7 Firefox

Re: slideshow in plaats van één afbeelding

Bericht door Wesso »

Het vervolg op mijn avonturen met NVU en Kompozer (NVU werkt iets soepeler dan Kompozer als het gaat om tabellen). Doctype werkt naar behoren en het principe van alt en title is me nu bekend. Mijn plan is om een of twee slideshows te maken met Dynamic Drive DHTML. Nu zit ik alleen even met de bestaande codes, misschien conflicteren deze met het slideshow-script.

Code: Selecteer alles

<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>

<style type="text/css">

/*Make sure your page contains a valid doctype at the top*/
#simplegallery1{ //CSS for Simple Gallery Example 1
position: relative; /*keep this intact*/
visibility: hidden; /*keep this intact*/
border: 10px solid darkred;
}

#simplegallery1 .gallerydesctext{ //CSS for description DIV of Example 1 (if defined)
text-align: left;
padding: 2px 5px;
}

</style>

<script type="text/javascript" src="simplegallery.js">

/***********************************************
* Simple Controls Gallery- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script type="text/javascript">

var mygallery=new simpleGallery({
	wrapperid: "simplegallery1", //ID of main gallery container,
	dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
	imagearray: [
		["http://i26.tinypic.com/11l7ls0.jpg", "http://en.wikipedia.org/wiki/Swimming_pool", "_new", "There's nothing like a nice swim in the Summer."],
		["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "", ""],
		["http://i30.tinypic.com/531q3n.jpg", "", "", "Eat your fruits, it's good for you!"],
		["http://i31.tinypic.com/119w28m.jpg", "", "", ""]
	],
	autoplay: [true, 2500, 2], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	oninit:function(){ //event that fires when gallery has initialized/ ready to run
		//Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
	},
	onslide:function(curslide, i){ //event that fires after each slide is shown
		//Keyword "this": references current gallery instance
		//curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
		//i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
	}
})

</script>
Mijn HEAD sectie:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Code: Selecteer alles

<head>
<title>Home</title>
<meta http-equiv="content-type"
content="application/xhtml+xml; charset=utf-8">
<meta name="robots" content="noindex, nofollow">
<style type="text/css">
div.hvimg img.hvimgr 
{display: none;}
div.hvimg:hover img.hvimgo 
{display: none;}
div.hvimg:hover img.hvimgr  
{display: block;}

</style>
Het is belangrijk dat de Javascript-bestanden en de navigatieknopjes (GIF) in dezelfde map staan als de afbeeldingen voor de slideshow. Ik heb ze in de map "Banner" gedaan onder C:\Website. Toch werkt het niet. Ik moet <style> elementen toevoegen in de head en <style type> stond al ingevuld. Geen idee waar ik het script neer moet zetten om alles te laten werken. De afmetingen voor de afbeeldingen heb ik ingevoerd en de aanwijzingen van de site opgevolgd.
<div id="simplegallery1"></div> staat volgens mij in de juiste tabel voor de slideshow. Wat gaat er mis?
Poehtje
Berichten: 16
Lid geworden op: 18 november 2010, 7:19
    Windows 7 Internet Explorer 8

Re: slideshow in plaats van één afbeelding

Bericht door Poehtje »

Hallo teaktime,

Ik gebruik zelf dit op mijn hoofdpagina om bezoekers meteen naar de betreffende categorie van mijn webwinkel te laten gaan: http://www.demijmerij.nl (zie slideshow nieuwe artikelen)

Is met aanklikbare links, ook gewoon gemaakt in Kompozer.


Is dit wat je bedoelt?

Edit: de plaatjes gaan 'random'. Dat wil zeggen dat elke keer wanneer de pagina laadt er een ander plaatje als eerste komt en het rijtje daarna ook veranderd.

Edit2: sorry, ik had jouw link gemist met wat je bedoelde. Dat is dus niet wat ik heb. :? Ik weet nu niet of ik dit moet laten staan of verwijderen, dus dat laat ik dan maar aan de moderators over :wink: (Overigens heb ik er ook wel een lightbox bij de artikelen staan, dus wellicht dat je daar wat mee kan...)
Gebruikersavatar
nirwana
Beheerder
Berichten: 11423
Lid geworden op: 19 september 2003, 5:09
    Windows 7 Firefox

Re: slideshow in plaats van één afbeelding

Bericht door nirwana »

Wesso,

Je kunt beter ergens onder jouw website de pagina plaatsen zoals je die nu hebt. Dan kunnen we die bekijken en zien wat er fout gaat. Nu hebben we alleen wat stukjes en kunnen zo lastig een compleet beeld krijgen. Je kunt een kopie maken van de pagina die je nu hebt en die onder een andere naam naar jouw website uploaden. Vervolgens kun je hier op het forum er een linkje naar plaatsen.
Met vriendelijke groet,

Martijn
[ Mede-oprichter + webmaster MozBrowser | beheerder Startpagina's over freeware, GIMP, Mozilla en OpenOffice.org / LibreOffice, Ubuntu
Wesso
Berichten: 14
Lid geworden op: 15 januari 2011, 17:01
    Windows 7 Chrome

Re: slideshow in plaats van één afbeelding

Bericht door Wesso »

^^ Ai, dat is een beetje moeilijk. Ik heb namelijk wel een domein gereserveerd bij de hosting maar nog geen hostingpakket gekozen. Ik kan niet online aangeven dat ik de domeinnaam aan het hostingpakket wil koppelen. Dat wordt e-mailen (of chatten) met de klantenservice.
Als ik zover ben (want het wordt tijd) laat ik 't weten :wink:
Gebruikersavatar
nirwana
Beheerder
Berichten: 11423
Lid geworden op: 19 september 2003, 5:09
    Linux Firefox

Re: slideshow in plaats van één afbeelding

Bericht door nirwana »

Wesso schreef:^^ Ai, dat is een beetje moeilijk. Ik heb namelijk wel een domein gereserveerd bij de hosting maar nog geen hostingpakket gekozen. Ik kan niet online aangeven dat ik de domeinnaam aan het hostingpakket wil koppelen. Dat wordt e-mailen (of chatten) met de klantenservice.
Als ik zover ben (want het wordt tijd) laat ik 't weten
Oh, je hoeft daar geen moeite voor te doen, hoor. Ik ga er alleen van uit dat als iemand hier een vraag stelt hij ook ergens een website heeft en dus online ruimte om iets op te plaatsen.

Je kunt de inhoud van de pagina ook hier op het forum plaatsen of als de pagina wat langer is, dan kun je die op http://pastebin.com/ plakken en hier een linkje ernaar plaatsen.
Met vriendelijke groet,

Martijn
[ Mede-oprichter + webmaster MozBrowser | beheerder Startpagina's over freeware, GIMP, Mozilla en OpenOffice.org / LibreOffice, Ubuntu
knorretje
Berichten: 204
Lid geworden op: 8 augustus 2010, 11:37
    Windows Vista Firefox

Re: slideshow in plaats van één afbeelding

Bericht door knorretje »

Hallo Wesso,
Kun je misschien aangeven waar jouw html bestanden staan?
Volgens jouw html codes staan de html bestanden en de javascript bestanden in dezelfde map, maar ik vraag mij af of dat wel jouw bedoeling is, anders moet je de URI locaties van de <script> elementen aanpassen.
De browser zoekt volgens mij scriptbestanden relatief ten opzichte van de webpagina.
Bijvoorbeeld:
<script src="mijnscript.js"> betekent zelfde map
<script src="scripts/mijnscript.js"> betekent scriptbestanden in submap "scripts"
Wesso
Berichten: 14
Lid geworden op: 15 januari 2011, 17:01
    Windows 7 Firefox

Re: slideshow in plaats van één afbeelding

Bericht door Wesso »

Hallo knorretje,

De HTML-bestanden staan in C:\Website. De script-bestanden staan nu in dezelfde map als de afbeeldingen voor de slideshow (Website\Banner) maar het werkt nog niet. Verder krijg ik deze foutmelding in IE:

Afbeelding
Heeft het te maken met de herschikking die Kompozer toepast als je het opslaat? Als ik het opgeslagen HTML weer zie, is de regel met <div id="simplegallery1"></div> verdwenen.

Hier staat het HTML-document waar ik mee bezig was. Dat is een handige oplossing voor zolang ik geen hosting heb :) Kunnen jullie er iets mee?
knorretje
Berichten: 204
Lid geworden op: 8 augustus 2010, 11:37
    Windows Vista Firefox

Re: slideshow in plaats van één afbeelding

Bericht door knorretje »

Omdat de gif-bestanden voor de knoppen niet in dezelfde map staan als de html pagina's, moet je dit nog aanpassen in de code van simplegallery.js (bovenaan):

Code: Selecteer alles

var simpleGallery_navpanel={
	panel: {height:'45px', opacity:0.5, paddingTop:'5px', fontStyle:'bold 11px Verdana'}, //customize nav panel container
	images: [ 'Banner/left.gif', 'Banner/play.gif', 'Banner/right.gif', 'Banner/pause.gif'], //nav panel images (in that order)
	imageSpacing: {offsetTop:[-4, 0, -4], spacing:10}, //top offset of left, play, and right images, PLUS spacing between the 3 images
	slideduration: 500 //duration of slide up animation to reveal panel
}
Verder staat op de website van dynamic drive dat je een geldige doctype moet gebruiken.
Het doctype kan ik niet vinden in jouw code op pastebin.
De testpagina van dynamic drive werkt in ieder geval gewoon bij mij, ook met een submap Banner.
Gebruikersavatar
nirwana
Beheerder
Berichten: 11423
Lid geworden op: 19 september 2003, 5:09
    Windows 7 Firefox

Re: slideshow in plaats van één afbeelding

Bericht door nirwana »

Wesso schreef:Als ik het opgeslagen HTML weer zie, is de regel met <div id="simplegallery1"></div> verdwenen.
Is die code helemaal verdwenen ? Of is die misschien afgekort tot <div id="simplegallery1" /> waardoor je deze niet meer kunt vinden ?
Wesso schreef:Hier staat het HTML-document waar ik mee bezig was. Dat is een handige oplossing voor zolang ik geen hosting heb :) Kunnen jullie er iets mee?
Kun je daar ook de code plakken die je krijgt nadat je het hebt opgeslagen via Kompozer ?
Met vriendelijke groet,

Martijn
[ Mede-oprichter + webmaster MozBrowser | beheerder Startpagina's over freeware, GIMP, Mozilla en OpenOffice.org / LibreOffice, Ubuntu
Wesso
Berichten: 14
Lid geworden op: 15 januari 2011, 17:01
    Windows 7 Firefox

Re: slideshow in plaats van één afbeelding

Bericht door Wesso »

Ik heb jullie aanwijzingen opgevolgd en de eerste slideshow is gelukt, hartelijk dank! :D
Nu nog een tweede slideshow ernaast in dezelfde cel. Zou dat lukken of is het handiger om een aparte cel te maken?
Ik heb wat geprobeerd, zie hieronder. In IE is slideshow 2 onzichtbaar, in FF zie ik hem onder slideshow 1 verschijnen.

Pastebin

(dit is gemaakt in NVU waar je wél het doctype kan meekopiëren naar Pastebin...)
Gebruikersavatar
nirwana
Beheerder
Berichten: 11423
Lid geworden op: 19 september 2003, 5:09
    Windows 7 Firefox

Re: slideshow in plaats van één afbeelding

Bericht door nirwana »

Wesso,

Eerlijk gezegd ben ik geneigd om te denken dat dit wel goed werkt. Ik heb jouw script gekopieerd en daar wat afbeeldingen bij gezocht, zodat ik eenzelfde idee zou krijgen. Hier staat een voorbeeld: www.mozbrowser.nl/web/wesso/index.html
Uiteraard mis ik nog de nodige afbeeldingen, maar volgens mij maakt dat voor het idee niet uit.

Wel valt het me op dat je voor het ene script de afbeeldingen uit een Banner-map haalt en voor het andere script uit de Images-map. Maar goed, dat is maar net wat je handig vindt. Voor hetzelfde geld maak je onder de Images-map een Banners-map en een Pijlen-map en wat je allemaal maar nodig denkt te hebben. Dat is net wat voor jou een logische indeling is.

Qua plaats waar het script verschijnt kun je de div plaatsen waar je zelf wilt. Dat kan in een andere tabel-cel zijn of in dezelfde. Dat ligt helemaal aan de opbouw van jouw website. Wel moet ik zeggen dat webdesigners doorgaans geen fan zijn van een layout met tabellen (ze gebruiken hier liever div's voor), maar soms maakt dat het leven wel eenvoudiger.
Met vriendelijke groet,

Martijn
[ Mede-oprichter + webmaster MozBrowser | beheerder Startpagina's over freeware, GIMP, Mozilla en OpenOffice.org / LibreOffice, Ubuntu