Afbeelding preview

Nvu, Kompozer en Bluegriffon zijn open source (WYSIWYG) programma's waarmee je een website kunt maken en onderhouden (vergelijkbaar met FrontPage / Dreamweaver).
Robby
Berichten: 253
Lid geworden op: 30 april 2004, 10:58
    Windows 7 Firefox

Afbeelding preview

Bericht door Robby »

Hallo,

Ik ben een website aan het maken met in een tabel enkele thumbnails van afbeeldingen. De bedoeling is dat als je er met de muis overheen zweeft de afbeelding groot wordt. Als je met de muis buiten de afbeelding komt moet deze weer klein worden. Ik heb de volgende werkende code:

<img src="Kunstwerken/2010-1s.jpg"
onmouseover="this.src='Kunstwerken/2010-1.jpg';"
onmouseout="this.src='Kunstwerken/2010-1s.jpg';" alt="">

Het probleem hierbij is dat de website wat onrustig wordt door het gedrag van de pagina. Bovendien werkt de onmouseout niet fijn omdat deze van toepassing is op de grote afbeelding ipv de thumbnail zodat het nogal wat moeite kost om uit de vergrootte afbeelding te komen.

Ik heb Jquery geprobeerd, maar die werkt niet in combinatie met Kompozer. Zodra ik zelfs maar een spatie toevoeg (en weer weg haal) met kompozer verliest Jquery zijn werking. Als ik het met een gewone editor doe, dan werkt het wel. Maar zelfs al zou ik het met een gewone texteditor in elkaar zetten..., Jquery heeft de neiging om de grote afbeeldingen buiten beeld te plaatsen als de thumbnails zich aan de rand bevinden.

Daarom had ik het idee om te proberen om bij "onmouseover" de grote afbeelding in een vast kader te laten plaatsen naast de rij met thumbnails. Dit vaste kader zou dan wel continue gecentreerd moeten worden wanneer er gescrold wordt. Is zoiets te doen? Of moet ik naar andere oplossingen zoeken?

Heeft iemand suggesties?

Groet,
Rob
Gebruikersavatar
nirwana
Beheerder
Berichten: 11528
Lid geworden op: 19 september 2003, 5:09
    Windows 7 Firefox
Contacteer:

Re: Afbeelding preview

Bericht door nirwana »

Rob,

Jouw vraag doet mij denken aan dit onderwerp.
Zie www.bottermodelbouw.nl/bu212-kiel.html voor een voorbeeld. Is dat ongeveer wat je in gedachten hebt ?
Met vriendelijke groet,

Martijn
[ Mede-oprichter + webmaster MozBrowser | beheerder Startpagina's over freeware, GIMP, Mozilla en OpenOffice.org / LibreOffice, Ubuntu
Robby
Berichten: 253
Lid geworden op: 30 april 2004, 10:58
    Windows 7 Firefox

Re: Afbeelding preview

Bericht door Robby »

Hoi Martijn,

Dat is ongeveer wat ik bedoel. Maar mijn thumbnails staan in een lange rij onder elkaar. Als ik dan scrol dan verdwijnt ook de box met de grote foto's uit beeld. Vandaar mijn opmerking om deze box gecentreerd (in het midden van de boven en onderkant van het scherm) te houden.

In een ander topic laat je een voorbeeld zien met een slide show. Dat zou eventueel ook wel kunnen. Die met die mooie vissen is wel geschikt, maar ik vind 'm erg moeilijk. Ik ben gisteren de hele tijd aan het puzzelen geweest door de site te kopiëren in mijn site en dan dingen aan te passen. Maar zelfs als ik de site gewoon opsla, dan doet hij het niet offline...

Groet,
Rob
Gebruikersavatar
nirwana
Beheerder
Berichten: 11528
Lid geworden op: 19 september 2003, 5:09
    Windows 7 Firefox
Contacteer:

Re: Afbeelding preview

Bericht door nirwana »

Rob,

De vissen zeiden mij niet direct veel. Maar goed, ik maak wel vaker voorbeelden en zal ze vast niet allemaal onthouden.

Maar ik neem aan dat je deze bedoelt: http://www.scriptiny.com/2008/12/javascript-slideshow/
voorbeeld: http://sandbox.scriptiny.com/javascript-slideshow/

Kun je jouw probeersel ergens online plaatsen, zodat we kunnen zien wat er fout gaat ?
Als dat niet mogelijk is, dan kun je ook de bestanden die je wilt gebruiken naar mij opsturen: martijn (at) mozbrowser (.) nl
Met vriendelijke groet,

Martijn
[ Mede-oprichter + webmaster MozBrowser | beheerder Startpagina's over freeware, GIMP, Mozilla en OpenOffice.org / LibreOffice, Ubuntu
Robby
Berichten: 253
Lid geworden op: 30 april 2004, 10:58
    Windows 7 Firefox

Re: Afbeelding preview

Bericht door Robby »

Hoi Martijn,

Ik krijg mijn mail retour...

This is the mail system at host husk.netground.nl.

I'm sorry to have to inform you that your message could not
be delivered to one or more recipients. It's attached below.

For further assistance, please send mail to postmaster.

If you do so, please include this problem report. You can
delete your own text from the attached returned message.

The mail system

: Message can't be delivered

Final-Recipient: rfc822;
Original-Recipient: rfc822;
Action: failed
Status: 5.7.1
Diagnostic-Code: x-unix; Message can't be delivered
Laatst gewijzigd door Robby op 14 mei 2011, 13:31, 1 keer totaal gewijzigd.
Gebruikersavatar
nirwana
Beheerder
Berichten: 11528
Lid geworden op: 19 september 2003, 5:09
    Windows XP Firefox
Contacteer:

Re: Afbeelding preview

Bericht door nirwana »

Oeps, webmaster (at) mozbrowser (.) nl dan maar ?

Ik neem overigens maar voor het gemak aan dat je van al die vreemde tekens wel een gewoon mailadres hebt gebakken.
Met vriendelijke groet,

Martijn
[ Mede-oprichter + webmaster MozBrowser | beheerder Startpagina's over freeware, GIMP, Mozilla en OpenOffice.org / LibreOffice, Ubuntu
Robby
Berichten: 253
Lid geworden op: 30 april 2004, 10:58
    Windows 7 Firefox

Re: Afbeelding preview

Bericht door Robby »

Als het goed is hem je 'm nu ontvangen...
Gebruikersavatar
nirwana
Beheerder
Berichten: 11528
Lid geworden op: 19 september 2003, 5:09
    Windows 7 Firefox
Contacteer:

Re: Afbeelding preview

Bericht door nirwana »

robby123 schreef:Als het goed is hem je 'm nu ontvangen...
Ja, ik heb hem, hoor.
Hij was helaas in de spam-box van Gmail terecht gekomen. Maar ik zal kijken of ik hier wijs uit kan worden.
Met vriendelijke groet,

Martijn
[ Mede-oprichter + webmaster MozBrowser | beheerder Startpagina's over freeware, GIMP, Mozilla en OpenOffice.org / LibreOffice, Ubuntu
Gebruikersavatar
nirwana
Beheerder
Berichten: 11528
Lid geworden op: 19 september 2003, 5:09
    Windows 7 Firefox
Contacteer:

Re: Afbeelding preview

Bericht door nirwana »

Robby,

Op www.mozbrowser.nl/web/robby/Kunstwerken.html heb ik nu een voorbeeld geplaatst van (een deel van) het bestand dat je mij toestuurde met daarin de originele slideshow verwerkt. Je gaf aan dat je geen afbeeldingen mee kon sturen, dus bij dit voorbeeld zitten geen afbeeldingen (behalve dan die van het slideshow-component).

Bij de HTML-pagina die jij me opstuurde viel het me op dat je het CSS-bestand niet had aangegeven. Daarom heb ik in de <head> van de pagina alsnog een verwijzing geplaatst:

Code: Selecteer alles

<link rel=stylesheet href="style.css" type="text/css">
Verder heb ik de code voor het slideshow-component uit de pagina verwijderd en de code van het voorbeeld erin geplaatst. Toen nog een text-align: center uit een tabel-cel verwijderd en daarna stond de slideshow wat mij betreft op de goede plaats.

Ik vond het namelijk van belang om eerst het voorbeeld werkend te krijgen met jouw webpagina. Als je dat voor elkaar hebt dan weet je in elk geval dat het goed samenwerkt met jouw pagina. Daarna kun je rustig kijken hoe je hier aanpassingen in kunt aanbrengen. Vanuit jouw code kreeg ik een beetje de indruk dat je hierin al wijzigingen hebt proberen aan te brengen. Maar voordat je hierin eigen wijzigingen kunt aanbrengen moet je toch zeker weten dat het goed samenwerkt met jouw pagina.

Verder weet ik niet of dit een eerste pagina van de website is of dat je al meer van deze pagina's klaar hebt. Ik wil namelijk voorstellen om te kijken of we van al die tabellen in de pagina af kunnen om over te schakelen naar het gebruik van div's. Tabellen zijn namelijk niet bedoeld voor de layout van een webpagina. Je gebruikt nu een tabel om iets horizontaal op de pagina te centreren, terwijl een div daar volgens mij ook goed geschikt voor is.
Met vriendelijke groet,

Martijn
[ Mede-oprichter + webmaster MozBrowser | beheerder Startpagina's over freeware, GIMP, Mozilla en OpenOffice.org / LibreOffice, Ubuntu
Gebruikersavatar
nirwana
Beheerder
Berichten: 11528
Lid geworden op: 19 september 2003, 5:09
    Windows 7 Firefox
Contacteer:

Re: Afbeelding preview

Bericht door nirwana »

Robby,

Hier heb ik alvast een voorbeeld gemaakt van dezelfde pagina, maar dan zonder al die tabellen en met wat extra CSS-code:
http://www.mozbrowser.nl/web/robby/KunstwerkenDiv.html

De code van de website wordt daardoor aanzienlijk eenvoudiger van opzet. Ook heb ik minder code nodig om hetzelfde te bereiken.

Maar ik laat het verder aan jou over om te bepalen of dit je wat lijkt. In elk geval weet je zo dat dat ook tot de mogelijkheden behoort.
Met vriendelijke groet,

Martijn
[ Mede-oprichter + webmaster MozBrowser | beheerder Startpagina's over freeware, GIMP, Mozilla en OpenOffice.org / LibreOffice, Ubuntu
Robby
Berichten: 253
Lid geworden op: 30 april 2004, 10:58
    Windows 7 Firefox

Re: Afbeelding preview

Bericht door Robby »

Even voor de meelezers: Martijn heeft me geholpen om de code werkend te krijgen. Heel erg bedankt. Het zou met niet gelukt zijn zonder je hulp. Ik heb nog enkele opmaakwensen die ik op zijn verzoek via het forum stel, zodat anderen kunnen meelezen.

> 1) Ik heb de pijltjes oranje gemaakt. Bij de thumbs lukt dat goed, maar bij
> de dia's zelf worden ze een beetje zwart oranje (alsof ze in de schaduw
> zitten).


Ik moet even zien hoe dat er uit ziet.
Als je de code kunt opsturen dan kan ik er weer eens naar kijken.

Dit is de code:

Code: Selecteer alles

body {margin:0; padding:5px; font:11px Verdana,Arial}
#slideshow {list-style:none; color:#fff}
#slideshow span {display:none}
#wrapper {width:756px; margin:30px auto; display:none}
#wrapper * {margin:0; padding:0}
#fullsize {position:relative; width:750px; height:500px; padding:2px; border:1px solid #ccc; background:#000}
#information {position:absolute; bottom:0; width:750px; height:0; background:#000; color:#fff; overflow:hidden; z-index:200; opacity:.7; filter:alpha(opacity=70)}
#information h3 {padding:4px 8px 3px; font-size:14px}
#information p {padding:0 8px 8px}
#image {width:750px}
#image img {position:absolute; z-index:25; width:auto}
.imgnav {position:absolute; width:25%; height:306px; cursor:pointer; z-index:150}
#imgprev {left:0; background:url(left.gif) left center no-repeat}
#imgnext {right:0; background:url(right.gif) right center no-repeat}
#imglink {position:absolute; height:306px; width:100%; z-index:100; opacity:.4; filter:alpha(opacity=40)}
.linkhover {background:url(link.gif) center center no-repeat}
#thumbnails {margin-top:15px}
#slideleft {float:left; width:20px; height:81px; background:url(scroll-left.gif) center center no-repeat; background-color:#000}
#slideleft:hover {background-color:#fff}
#slideright {float:right; width:20px; height:81px; background:#000 url(scroll-right.gif) center center no-repeat}
#slideright:hover {background-color:#fff}
#slidearea {float:left; position:relative; width:710px; margin-left:5px; height:81px; overflow:hidden}
#slider {position:absolute; left:0; height:81px}
#slider img {cursor:pointer; border:1px solid #FF5828; padding:2px}
> 2) Sommige schilderijen zijn liggend, sommige staand. Als de formaten niet
> precies het zelfde zijn van de opvolgende dia's, dan blijft een deel van de
> oude dia staan met "daar bovenop" de volgende dia. Kan ik de oude dia
> volledig laten verdwijnen voordat de volgende dia verschijnt? Zodat ik geen
> gecombineerde foto's krijg?


Het lijkt me het handigste als alle foto's hetzelfde formaat krijgen. Desnoods geef je de foto's die hier niet aan voldoen een achtergrond in een vaste kleur. Dan vervangen de foto's elkaar in elk geval helemaal en houd je geen stukjes van de vorige foto in beeld.

Wel handig voor het programmeren nu, maar niet zo handig als er later foto's bij gevoegd moeten worden.

> 3) De achtergrond is een vrij grote foto van een stuk leer. Dat kost veel
> downloadtijd. Ik kan die foto verkleinen, maar als hij deze gaat herhalen
> over de pagina ziet het er niet zo mooi uit. Kan ik de kleinere foto laten
> oprekken zodat het volledige scherm wordt gebruikt. (Iets met no-repeat)?


Bijgevoegd een achtergrond-afbeelding die een stuk kleiner is.

We zijn begonnen met een achtergrond van 291 kilobytes en 1905 bij 1191 pixels.
Dat is een aardig groot bureaublad.

Hier heb ik het volgende mee gedaan:
- stukje uit het grote geheel geknipt (crop)
- de afbeelding naadloos gemaakt (make seamless)
Voorlopig resultaat: 91 kilobytes.

- de afbeelding omgezet naar een geindexeerd kleurenpalet (maximaal 256 kleuren)
Resultaat: 50 kilobytes.

Nu heb ik de regels in het css-bestand vervangen door een eenvoudige:
background: #373936 url(Achtergrond.png);
#373936 heb ik er voor de zekerheid in geplaatst.
Die is feitelijk overbodig, maar dat is een kleurtje uit de achtergrondafbeelding.

Door verder niets op te geven zal de achtergrond-afbeelding zich herhalen.
Kijk maar of het je zo bevalt.

Overigens kun je de bewerkingen die ik op de afbeelding heb doorgevoerd ook zelf uitvoeren.
Als grafisch programma heb ik GIMP gebruikt. Dat is gewoon gratis te downloaden en te gebruiken: http://gimp.startpagina.nl
Zo kun je dus ook zelf een uitsnede uitkiezen, deze naadloos maken, omzetten naar geïndexeerd en opslaan als PNG (of als JPG houden).

Uiteraard kun je dat ook met een ander grafisch programma doen, want een beetje grafisch programma ondersteunt de handeling wel die ik hierboven vermeld. Al moet het programma natuurlijk wel de seamless-bewerking ondersteunen. GIMP heeft dat standaard aan boord. Maar het kan ook met andere software zoals uitgelegd op http://www.smulweb.nl/137544/artikel/Ee ... gina-maken

Dit werkt perfect Martijn!

> 4) IE schuift het hele middenblok naar links. Je hebt me een keer verwezen
> naar een website waar daarover uitleg staat. Ik kom er nog niet goed uit,
> maar ik puzzel nog een tijdje verder. Klopt het dat ik dat in "klaver.css"
> moet aanpassen?


Dat heeft dan iets te maken met een margin-left: auto; margin-right: auto;
Als IE dat niet trekt dan is dat vaak een kwestie van de juiste DOCTYPE bovenaan de pagina plaatsen. Elke webpagina dient namelijk met een DOCTYPE-regel bovenaan de pagina te beginnen. Daarmee geef je de versie van de gebruikte HTML-code in de pagina aan. Zonder die regel werkt een pagina ook wel, maar als je echt met div's en CSS aan de slag gaat dan heb je zo'n regel bovenaan de pagina nodig. Op die basis weet IE namelijk welke standaard er toegepast moet worden. Anders schiet IE van "standards mode" naar "quirks mode" en kun je van alles verwachten.

Als een pagina er goed uitziet in Firefox en niet in IE dan is die regel het eerste waar je aan moet denken. Al moet ik toegeven dat ik vaak ook vergeet om daaraan te denken.

Dit is de pagina definitie:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Gebruikersavatar
nirwana
Beheerder
Berichten: 11528
Lid geworden op: 19 september 2003, 5:09
    Windows 7 Firefox
Contacteer:

Re: Afbeelding preview

Bericht door nirwana »

robby123 schreef:1) Ik heb de pijltjes oranje gemaakt. Bij de thumbs lukt dat goed, maar bij de dia's zelf worden ze een beetje zwart oranje (alsof ze in de schaduw zitten).
In het Javascript staan de volgende regels die hiervoor zorgen:

Code: Selecteer alles

			b.onmouseover=f.onmouseover=new Function('TINY.alpha.set(this,'+this.navHover+',5)');
			b.onmouseout=f.onmouseout=new Function('TINY.alpha.set(this,'+this.navOpacity+',5)');
Bovenin het script wordt aan navHover en navOpacity een waarde gegeven. Die heb ik nu beide op 100 gezet om dit effect uit te schakelen:

Code: Selecteer alles

	this.thumbOpacity=this.navHover=100;
	this.navOpacity=100;
In jouw script zal dit er wat anders uitzien omdat je de compressed versie van het script gebruikt.
In de compressed versie staat bijvoorbeeld deze regel:

Code: Selecteer alles

this.thumbOpacity=this.navHover=70;this.navOpacity=25;
Daarin kun je 70 en 25 vervangen door 100:

Code: Selecteer alles

this.thumbOpacity=this.navHover=100;this.navOpacity=100;
Met vriendelijke groet,

Martijn
[ Mede-oprichter + webmaster MozBrowser | beheerder Startpagina's over freeware, GIMP, Mozilla en OpenOffice.org / LibreOffice, Ubuntu
Robby
Berichten: 253
Lid geworden op: 30 april 2004, 10:58
    Windows 7 Firefox

Re: Afbeelding preview

Bericht door Robby »

Ik snap het...
Qua opbouw wel een rommeltje. Sommige ccs zaken staan in het script, sommige in de css-file en de rest in de html. Maar goed. Het werkt.

Het probleem met IE lukt niet door de pagina definitie aan te passen. Misschien met de java oplossing, maar die is te ingewikkeld voor me. Overigens valt me ook op dat de teksten die onder de afbeeldingen moeten verschijnen in IE ook niet lekker lopen. Ze verschijnen even en verdwijnen dan meteen weer. Niet te lezen dus. Dat is iets wat ik fout doe, want het originele voorbeeld toont die teksten wel correct in IE.

Verder vroeg ik me nog af of het mogelijk is om het zonder thumbs te doen. Ik kopieer nu de afbeeldingen en verklein die voor de preview (thumb) regel. Het zou handiger zijn om de grote afbeeldingen kleiner te presenteren in de preview regel. Dan hoeven de afbeeldingen niet bewerkt te worden en hoeft er minder te worden ingelezen...
Gebruikersavatar
nirwana
Beheerder
Berichten: 11528
Lid geworden op: 19 september 2003, 5:09
    Windows 7 Firefox
Contacteer:

Re: Afbeelding preview

Bericht door nirwana »

robby123 schreef:> 2) Sommige schilderijen zijn liggend, sommige staand. Als de formaten niet
> precies het zelfde zijn van de opvolgende dia's, dan blijft een deel van de
> oude dia staan met "daar bovenop" de volgende dia. Kan ik de oude dia
> volledig laten verdwijnen voordat de volgende dia verschijnt? Zodat ik geen
> gecombineerde foto's krijg?


Het lijkt me het handigste als alle foto's hetzelfde formaat krijgen. Desnoods geef je de foto's die hier niet aan voldoen een achtergrond in een vaste kleur. Dan vervangen de foto's elkaar in elk geval helemaal en houd je geen stukjes van de vorige foto in beeld.

Wel handig voor het programmeren nu, maar niet zo handig als er later foto's bij gevoegd moeten worden.
Je zult die foto's toch eerst in een bepaald formaat moeten zetten voordat je ze in de slideshow kunt opnemen. Die foto's kun je dan plaatsen in een canvas van een bepaald formaat.

Daarnaast kun je het jezelf makkelijk maken door een automatisch resize-script te gebruiken. Zo gebruik ik daarvoor ImageMagick mogrify met een dergelijk commando:

Code: Selecteer alles

mogrify -colorspace RGB -trim -size 135x135 -thumbnail 135x135 -background black -gravity center -extent 135x135 -path D:\map\website D:\map\*.jpg
Wat uitleg hierbij:
Dit maakt een afbeelding van 135 bij 135 pixels. Als een foto daar niet geheel in past dan wordt deze met zwart (-background black) opgevuld. Via de gravity wordt de afbeelding in dat canvas gecentreerd. In dit geval worden alle afbeeldingen in D:\map verkleind en in de map D:\map\website geplaatst. Trim is een ander woord voor crop, oftewel het afsnijden van de randen van een afbeelding.
Met vriendelijke groet,

Martijn
[ Mede-oprichter + webmaster MozBrowser | beheerder Startpagina's over freeware, GIMP, Mozilla en OpenOffice.org / LibreOffice, Ubuntu
Gebruikersavatar
nirwana
Beheerder
Berichten: 11528
Lid geworden op: 19 september 2003, 5:09
    Windows 7 Firefox
Contacteer:

Re: Afbeelding preview

Bericht door nirwana »

robby123 schreef:Het probleem met IE lukt niet door de pagina definitie aan te passen.
Toch wel. Gebruik deze maar:

Code: Selecteer alles

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Zie ook http://hsivonen.iki.fi/doctype/
Met vriendelijke groet,

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