Higslide in Wordpress

Status
Niet open voor verdere reacties.
J

jegero13

Gebruiker
Lid geworden
24 dec 2008
Berichten
270
Hallo,

Ik heb een WordPress site. En daar laat ik ook foto's op zien.
Nu was het de bedoeling om dit met Highslide te gaan doen. Maar omdat er bij de foto's ook beschrijvingen moet komen, is het de bedoeling dat dat ook te zien is. Ik krijg het alleen niet voormekaar om dit te laten zien. In de "popup" zeg maar.
Wel als over de thumbnail heengaat zie je de naam van de foto, maar dat is niet de bedoeling. http://www.tib.nl/?page_id=218 is de pagina.

Nu heb ik de thumbnails ook verkleind naar 50 x 50 pixels. Zodat je wel op de foto moet klikken om het origineel te zien zeg maar. Maar krijg het niet voormekaar dat het dichter bij mekaar komt te staan. niet die grote tussenruimte er tussen zeg maar. Hoe kan ik dat oplossen?

Het zijn dus 2 vragen eigenlijk.

Ik hoop dus dat jullie me kunnen helpen want ik kom er echt niet meer uit.

Mvg.
Jelle
 
Hoi Jelle,
Ik doe even de laatste vraag.
Als je snel klaar wilt zijn, maak je eerst een reservekopie van het tib.nl/wp-content/themes/TIB/style.css stylesheet.
Dan open je het origineel, en je plakt er helemaal onderaan bij:
Code: 
.page-id-218 #content .gallery {
   margin: 0 0 0 20px; /* linkermarge van het blok; was: auto */
   overflow: visible;  /* dan rechterkant geen probleem */   
}
.page-id-218 #content .gallery .gallery-item {
   margin: 0 0 15px 0; /* verticale tussenruimte */
   width: 16%; /* regelt hor. afstand, was: 30% */
}
.page-id-218 #gallery-1 br {
   display: none; /* = nieuwe regel na 3 stuks weghalen */
}
En even uploaden.
Is dat naar wens?

Met vriendelijke groet,
CSShunter
___________
Voor snelle analyse van dit soort dingen, plus online aanpassingen bekijken: get Firebug ! :)
 
Hoi Jelle,
Even een heel ander punt. Als ik op www.tib.nl/?page_id=218 kom, zie ik een header-image ...

tib-header3-ori-klein.png

  • Scheef! Het pand staat nogal uit het lood... :rolleyes:
  • De foto is denkelijk met een groothoeklens genomen: het midden staat bol. :rolleyes:
  • Het is een .bmp-bestand van ruim 1/2 MB: 546kB. :shocked:
Zonde, want:
  • Bij een renovatie verwacht ik dat alle palen recht komen te staan.
  • De vissenkom-vertekening kan er uit gehaald worden.
  • Een .bmp bestand is niet geschikt voor een website (mag eigenlijk alleen een .png, .gif of .jpg zijn), en is bovendien verschrikkelijk groot, wat de pagina-snelheid fors omlaag haalt.
Dit leed kon ik niet aanzien ;)
... en voordat ik het wist stond m'n tekenprogramma open:
  • Horizon en palen rechtgezet, met bijtekenen van de dan ontbrekende hoeken en onderkant van het plantsoentje.
  • De opbolling platgeslagen, en verticale lijnen strak gemaakt.
  • Opgeslagen als .jpg bestand met 10% compressie.
Resultaat (verkleind):

tib-header3-nw-klein.png
De afbeelding is nu maar 54kB groot: precies tien keer zo klein, en tien keer zo snel! :)

Met vriendelijke groet,
CSShunter
__________
Leesvoer over opslaan van web-afbeeldingen: artikeltje Image saving - Gif, png, jpg: which is the best format?.
 
Hallo CSS Hunter.

Sorry voor de late reactie, maar was er nog niet aan toe gekomen ;-)
Ik heb die CSS nu veranderd en dit is precies wat ik bedoelde :-) Heel hartelijk bedankt.
En wat die foto betreft, dat was meer een soort testje... We wisten nog niet goed wat we als header moesten doen, dus heb met onze Sony Cybershot een "panorama" foto gemaakt zeg maar ;-) Dus het aanpassen heeft niet zo veel zin, dit omdat er binnenkort toch een nieuwe foto opkomt zeg maar!!
Maar heel hartelijk bedankt, en weet niet of jij van dat andere ook nog verstand hebt? Want daar ben ik nog steeds niet uit ;-)

Jelle
 
Hoi Jelle,
... dat andere ... daar ben ik nog steeds niet uit ;)
Klik om te vergroten...
Ja, da's waar, je tweede vraag hangt nog helemaal in de lucht.

Ik heb eens even rondgeneusd, en het blijkt dat de Highslide al een ingebouwde voorziening heeft om een opschrift ('caption') te tonen. Die stond hier alleen uitgeschakeld.
Wat er moet gebeuren om 'm in werking te krijgen:

1.
In het javascript van de Highslide in de <head> van de pagina komt te staan:
[JS]...
// SHOW IMAGE TITLES AS CAPTIONS
hs.captionEval = 'this.thumb.alt';
hs.captionOverlay.position = 'top left';
...[/JS]

2.
Vlak voor de </head> van de pagina zet je aangepaste styles voor de opschriften:
HTML: 
<style type="text/css">
.highslide-caption {
	position: relative;
	background: url(http://bliksekaters.nl/tests/images/semi-transparant-wit.png);
	border: 0;
	font-weight: normal;
	padding: 3px 0 3px 10px;
	margin: 10px;
	text-align: left;
	width: 95%;
	color: #000080; /* donkerblauw */
	}
</style>

3.
In de html-code van de foto-serie wordt de structuur telkens:
HTML: 
...
<dl class='gallery-item'>
    <dt class='gallery-icon'>
        <a href='http://www.tib.nl/wp-content/uploads/2011/10/Image00001.jpg'>
        <img width="50" height="50" class="attachment-thumbnail" title=""
        src="http://www.tib.nl/wp-content/uploads/2011/10/Image00001-150x150.jpg" 
        alt="Bla die bla" /></a>
    </dt>
</dl>
...
Test-test-test: tib-caption.htm
Zie de broncode.

Toelichting:
  • Alleen de eerste 3 heb ik voorzien van een opschrift op deze manier.
  • Bij de 3e foto heb ik getest hoe het gaat met een langere regel toelichtende tekst.
  • Er zit een semi-transparante achtergrond onder de opschriften, dat lijkt me mooier dan een ondoorzichtige achtergrond (er is in elk geval een achtergrond nodig om de tekst leesbaar te houden boven de verschillende licht- & donker-schakeringen in de foto's).
  • Daarvoor een semi-transparante png gebruikt (met een kleinere opacity in de css zou de tekst ook meteen transparanter worden; de tekst blijft nu op volle sterkte).
    (deze; ziet er op een witte background vrij onzichtbaar uit, maar hij is er wel. ;)). In de css moet je de url even wijzigen naar het mapje waar je 'm er bij jou in zet.
  • In de originele code stonden bij de thumbnails op verschillende punten title's en/of alt-omschrijvingen. De meeste zijn nu verdwenen om geen ongewenste tooltips te krijgen.
  • Voor de opschriften heb ik steeds de alt="..." van de thumbnail-images gebruikt, omdat het gebruiken van een title een tooltip zou opleveren.
  • De lege title="" eigenschap moet er in blijven staan, anders zou Internet Explorer toch de inhoud van de alt="..." laten zien als je over een thumbnail heen hovert.
  • Meteen even de EN titles van de Highslide-knoppen in gebruikersvriendelijk NL omgezet.
Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Meteen even de EN titles van de Highslide-knoppen in gebruikersvriendelijk NL omgezet.
Klik om te vergroten...
Is het ook mogelijk om dat in de java te doen? Zodat ik niet in elke pagina waar ik dit wil doen, dit moet bijplaatsen in de bron? (Dit is gedaan, hoeft niet meer)

Vlak voor de </head> van de pagina zet je aangepaste styles voor de opschriften:
HTML: 
<style type="text/css">
.highslide-caption {
    position: relative;
    background: url(http://bliksekaters.nl/tests/images/semi-transparant-wit.png);
    border: 0;
    font-weight: normal;
    padding: 3px 0 3px 10px;
    margin: 10px;
    text-align: left;
    width: 95%;
    color: #000080; /* donkerblauw */
    }
Klik om te vergroten...
Is het ook mogelijk om dit gelijk in de pagina te bouwen, dat dat gewoon standaard in alle pagina's zit? Want om steeds de bron aan te passen is niet echt een optie, dit omdat ik WordPress gebruik... Dan zou ik dat steeds aan moeten passen. Is het misschien mogelijk om dit gelijk in de index.php in te bouwen? Dit is ook gedaan, ik heb dit in de index gedaan en nu pakt hij het meteen op alle pagina's.

Voor de rest hartelijk bedankt, ik ga dit meteen toevoegen!

Heel hartelijk bedankt =) :thumb:
 
Laatst bewerkt:
Hoi Jelle,
Ja, hoe het precies in het Wordpress-template moest landen kon ik van buitenaf niet zien.
Blij dat het gelukt is! :thumb:
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan