Slim Jetpack-plugin: iPad probleem met captions tiled gallery

  • Opgelost bxwebber

    (@bxwebber)


    11 jaren, 8 maanden geleden

    Hi!

    Hopelijk kan iemand helpen met het oplossen van het volgende (javascript/jquerie?) probleem:

    Ik gebruik de Slim Jetpack-plugin om ’tiled’ gallerijen te maken. De plaatjes linken naar blogposts. Ze hebben captions (bijschriften) die verschijnen bij hoveren over het plaatje. Maar bij weergave op een iPad gedragen de captions zich vreemd:

    1x tappen laat de caption verschijnen, 2e tap brengt je naar de gelinkte pagina. Het probleem: als je terug gaat naar de gallerij-pagina met de ’terug’ button van de browser blijft de aangeklikte caption zichtbaar, ook bij alle volgende plaatjes die je aanklikt. Pas als je een eerder geklikt plaatje opnieuw aanklikt verdwijnt de caption (en ga je wonderlijk genoeg direct weer naar de desbetreffende link), of als je de gallerij-pagina opnieuw laat laden.

    Wat ik natuurlijk zou willen is dat bij de 2e tap de caption weer verdwijnt, zoals je zou verwachten.

    Ik heb al van alles afgezocht naar een oplossing, maar tot nu toe niets gevonden.

    Alvast dank!

3 reacties aan het bekijken - 1 tot 3 (van in totaal 3)
  • Moderator Richard van Denderen

    (@rdd)

    11 jaren, 8 maanden geleden

    bij een 2e tap de caption laten verdwijnen kan ook niet… Dan ontneem je de bezoeker de mogelijkheid om naar die pagina toe te navigeren.
    Touch apparaten hebben geen ‘hover’ state dus daar ga je de oplossing ook niet in vinden.

    Thread starter bxwebber

    (@bxwebber)

    11 jaren, 8 maanden geleden

    Hi Richard,

    dank voor je reactie. Ja, dat is waar van die hover-state, maar meestal breekt een mobiele browser dat in verschillende stappen of laat het effect gewoon links liggen…

    In dit geval lijkt het alsof het javascript een stap mist. Het script wordt pas bij opnieuw aanklikken alsnog afgemaakt, zeg maar – dan zie je de caption verdwijnen en direct daarna vindt vanzelf het doorlinken plaats. Ik dacht zo: misschien is die laatste actie dan ook zo te scripten dat hij eerder plaatsvindt…

    Ook is het zo dat het plaatje de eigenlijke link is, niet de caption. Die wordt alleen opgeroepen door de link. Daarom dacht ik dat het misschien een kwestie was van het anders scripten van de opeenvolgende mouse events.

    Maar misschien heb je gelijk, ik weet zelf te weinig van javascript. Voorlopig moet het maar zo.

    Thread starter bxwebber

    (@bxwebber)

    11 jaren, 8 maanden geleden

    Inmiddels heb ik na veel gepuzzel alsnog een oplossing gevonden die lijkt te werken:

    In het originele Slim Jetpack Tiled Gallery .js file kun je dit deel vervangen:

    TiledGallery.prototype.Captions = function() {
	/* Hide captions */
	this.caption.hide();

	this.item.on( 'hover', function() {
		$( this ).find( '.tiled-gallery-caption' ).slideToggle( 'fast' );
	});
};

    door dit:

    TiledGallery.prototype.Captions = function() {
	/* Hide captions */
	this.caption.hide();

	this.item.hover(
		function() { $( this ).find( '.tiled-gallery-caption' ).slideDown( 'fast' ); },
		function() { $( this ).find( '.tiled-gallery-caption' ).slideUp( 'fast' ); }
	);
	this.item.click(
		function() { $( this ).find( '.tiled-gallery-caption' ).slideUp( 'fast' ); }
	);
};

    De caption scrollt nu weg na klikken en voordat je naar de gelinkte pagina gaat. Werkt in Firefox, Safari, Chrome (Mac en PC) en iOS. Alleen niet getest in IE.

    Nu nog uitvinden hoe dat vervangen gaat als je dat m.b.v. de functions.php van het child thema wil doen i.p.v. door het originele .js aan te passen. Zie mijn post hier . Weet iemand dat misschien?

    Hulp is nog steeds welkom: misschien bestaat er een betere oplossing?

3 reacties aan het bekijken - 1 tot 3 (van in totaal 3)
  • Het onderwerp ‘Slim Jetpack-plugin: iPad probleem met captions tiled gallery’ is gesloten voor nieuwe reacties.