Plugin, beproefd en in gebruik (check feb 2019)

*Nextgen gallery

http://www.nextgen-gallery.com/nextgen-gallery-extension-plugins/

We cannot display this gallery

Dit gebeurde op de ene site wel, de andere niet. Met verder identieke situatie: zelfde thema, zelfde plugins.
Vreemd was dat de foutmelding alleen optrad op een pagina met een gallery (aangeroepen met nggallery id=1) en niet op een bericht met dezelfde code.
De oplossing bleek: een oude versie van nggallery installeren; toen werkte het wel. Daarna geupdate naar de nieuwste versie.

diashow in zijbalk
[collapse]

*Nextgen gallery
Let op: ga naar de opties van NG Gallery:
– zet vinkje bij Gallery Enable AJAX pagination; Imagebrowser
– download JW image rotator; zie aanwijzingen bij Slideshow tabje: zet hem in wp-content. Geef het pad aan bij de opties van nextgengallery.
– zet in een tekst widget:

nggallery id=2 template=galleryview images=1 w=207

– vertaal in /httpdocs/wp/wp-content/plugins/nextgen-gallery/view/imagebrowser.php de tekst : Back: vorige, volgende en ook Foto en van. (ik geloof niet dat dat nu nog nodig is)

[collapse]

templates

 nggallery id=1 template=b2cocarousel images=5 

NB: plaats het template in een zelf te maken map: nggallery. Plaats de map in het (child)-thema .
De naam van het bestand moet zijn: gallery-naam.php
Je roept het template aan met alleen het stukje tekst achter het streepje. In dit voorbeeld gaat het om gallery-b2cocarousel.php
*Nextgen gallery

In het template heb ik 3x naar een eigen stukje css  verwezen:

[php5 firstline=”28″ highlight=”28,32,51″]

<ul class="ngg-gallery-listk">

<ul class="ngg-gallery-listk"><!– PREV LINK –></ul>

</ul>

<ul class="ngg-gallery-listk">

<ul class="ngg-gallery-listk">

<li class="ngg-prevk"><a class="prev" href="<?php echo $prev ?>">◄</a></li>

</ul>

</ul>

<ul class="ngg-gallery-listk">

<ul class="ngg-gallery-listk"><!– Thumbnail list –></ul>

</ul>

<ul class="ngg-gallery-listk">

<ul class="ngg-gallery-listk">

<li class=""ngg-thumbnail-list" id="ngg-image-<?php echo $image->pid ?>">pid == $current->pid) echo ‘selected’ ?>" >
<a title=""<?php" href="<?php echo $image->pidlink ?>">description ?>" >
<img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" />size ?> />
</a></li>

</ul>

</ul>

<ul class="ngg-gallery-listk">

<ul class="ngg-gallery-listk"><!– NEXT LINK –></ul>

</ul>

<ul class="ngg-gallery-listk">

<ul class="ngg-gallery-listk">

<li class="ngg-nextk"><a class="next" href="<?php echo $next ?>"></a></li>

</ul>

</ul>

[/php5]

In Firefox gekeken welke code nggallery.css precies gebruikte en deze aangepast: de nieuwe code heb ik in het stijlbestand van het thema gezet.

    /* eigen layout */  .ngg-gallery-listk {   list-style-type:none;   padding: 10px !important;   text-indent:0px !important;  }    .ngg-gallery-listk li {   float:left;   margin:0 2px 0px 2px !important;   overflow:hidden;  }    .ngg-gallery-listk li a {   border:1px solid #CCCCCC;   display:block;   padding:2px;  }    .ngg-gallery-listk li.selected a{   -moz-background-clip:border;   -moz-background-inline-policy:continuous;   -moz-background-origin:padding;   background:#000000 none repeat scroll 0 0;  }    li.ngg-nextk, li.ngg-prevk {   height:40px;   width:40px;   font-size:3.5em;  }    li.ngg-nextk a, li.ngg-prevk a {   padding-top: 10px;   border: none;   text-decoration: none;  }  .ngg-galleryoverview div.pick img{   width: 70{6057f192fcaa104d5cef828d6b20b99706932ef5d7e753992a4e9cd8fde980a4};  }    .ngg-gallery-listk li img {   height:120px;   width:120px;  }    li.ngg-nextk, li.ngg-prevk {   height:120px;   width:120px;   font-size:3.5em;  }  li.ngg-nextk, li.ngg-prevk {   height:40px;   width:40px;   font-size:3.5em;  }    li.ngg-nextk a, li.ngg-prevk a {   padding-top: 10px;   border: none;   text-decoration: none;  }  .ngg-galleryoverview div.pick img{   width: 70{6057f192fcaa104d5cef828d6b20b99706932ef5d7e753992a4e9cd8fde980a4};  }    .ngg-gallery-listk li img {   height:120px;   width:120px;  }    li.ngg-nextk, li.ngg-prevk {   height:120px;   width:120px;   font-size:3.5em;  }  .imggall {width:800px}  .ngg-galleryoverview div.pick img {width: 90{6057f192fcaa104d5cef828d6b20b99706932ef5d7e753992a4e9cd8fde980a4};}  .thumbgall {width:200px}  

Of gebruik een bestaand template:  template=caption

Toegepast bij https://www.eetbaarnijmegen.nl/permablitz/permablitz-bij-sietske-lent/ Hier zie je de tekst die is ingevuld bij Title verschijnen indien je hovert met je muis over het plaatje.

Je kan ook de tekst als een beschrjiving onder het plaatje zien; vul dan het veld beschrijving in.

[collapse]

kleine slideshow op pagina

Op B2co staat de slideshow in een tabel, in het rechter vakje:
b2covoorpagina

slideshow id=2 w=300 h=200 

[collapse]

Andere diashows

http://jquery.malsup.com/cycle/lite/
JJ NextGen JQuery Carousel: o.a. de mogelijkheid om een link te plaatsen bij een plaatje: http://wordpress.org/extend/plugins/jj-nextgen-jquery-carousel/http://sorgalla.com/projects/jcarousel/#Configuration

[collapse]

Geen effect te zien?
  •  Let op dat je bij de gallery-tab geen vinkje zet naast: The gallery will open the ImageBrowser instead the effect
  • Niet compatibel met andere effect-plugins; verwijder ook het fancy lightnox effect vinkje bij : Ng Gallery Optimizer Modified

[collapse]

Snelheid:

 maatregelen om snellere laadtijd te verkrijgen”

  • Overige opties:
    • Afbeeldingen automatisch verkleinen na uploaden
    • effects: none
    • Stijlen: kijk wat je nodig hebt uit het default bestand en Enable custom CSS: nee
  • Bij aardeboerconsument gebruikte ik alleen op de voorpagina de diashow. Stel dan bij options Effecten: none. Standaard staat hij op Shutter. Dat is weer een onnodig script.
  • Resize, zo mogelijk naar de juiste afmeting
  • Bij aardeboerconsument gebruikte ik alleen op de voorpagina de diashow. Afmetingen zijbalk: 205; dan plaatjes ook zo breed
  • JJ NextGen Unload: scripts van Nextgen onderaan; NB niet gebruiken als je widgets gebruikt, zoals: nggallery id=. Dan laat hij een verticale rij zien en geen zoom effecten!
  • script pas op het einde geladen ipv in header
  • NextGEN Gallery Optimizer, of nog beter: Ng Gallery Optimizer Modified[, let op: geen vinkje bij Fancy lightbox effect!
    http://wordpress.org/extend/plugins/ng-gallery-optimizer-modified/ Improves your site’s page load speed by preventing NextGEN’s scripts & css from loading on posts and pages without galleries.

[collapse]