Jump to content

Conflict tussen Fancybox en css


Recommended Posts

Geplaatst:

Het verhaal. Ik ben bezig een website te bouwen, waarin ik niet-zichtbare inhoud wil laten zien in een inline Fancybox.

Mijn Fancybox java in de <HEAD> ziet er als volgt uit:

	<script type="text/javascript">
		$(document).ready(function() {

			$(".lightbox").fancybox({
				'autoScale'			: 'false',
				'scrolling'			: 'no',
				'transitionIn'		: 'fade',
				'transitionOut'		: 'fade',
				'overlayOpacity'		: '0.2',
				'overlayColor'		: '#fff',
				'type'			: 'inline',
			});

		});
	</script>

Vervolgens de link (met knop, CSS gestijld) die de FancyBox moet aanroepen:

		<a class="nav lightbox" href="#1">Knopje</a>

De inhoud die moet worden weergegeven in de FancyBox:

<div style="visibility:hidden">
		<div id="1">
                              INHOUD
		</div>
</div>

Zoals al gezegd werkt het in diverse browsers prima, maar in IE dus niet.. Terwijl ik hetzelfde script heb gebruikt voor andere websites, en het daar wel in IE werkte. Het enige verschil is dat ik daarbij niet CSS-gestijlde knoppen gebruikte, maar afbeeldingen als knop met daaronder de link die de FancyBox tevoorschijn haalde.

Nu heb ik na een tijd zoeken op internet tegen een issue aangelopen met classes in IE, namelijk dat meerdere classes in IE niet in één keer konden worden opgeroepen. Dus niet zoals hierboven toegepast.. Ik had bedacht dat ik dit dan op zou kunnen lossen door in plaats van meerdere classes gewoon voor de CSS-gestijlde knop class te gebruiken, en vervolgens voor de FancyBox het id element. Dit was blijkbaar te vroeg gejuicht..

Ik zie het even niet meer, vandaar hier even de vraag. Iemand enig idee hoe dit simpel op te lossen kan zijn?

[table=header]EDIT[/table]

Opgelost inmiddels. Voor de waarde van dit topic dan maar even de oplossing:

1.: CSS voor de buttons uit de header gehaald en in een externe .css file gestopt

2.: Het lightbox script in de header een nieuwe plek gegeven, nu ziet IE deze ook gewoon.

Een reactie plaatsen

Je kan nu een reactie plaatsen en pas achteraf registreren. Als je al lid bent, log eerst in om met je eigen account een reactie te plaatsen.

Gast
Op dit onderwerp reageren...

×   Je hebt text geplaatst met opmaak.   Opmaak verwijderen

  Only 75 emoji are allowed.

×   Je link is automatisch ingevoegd.   In plaats daarvan weergeven als link

×   Je vorige bewerkingen zijn hersteld.   Alles verwijderen

×   You cannot paste images directly. Upload or insert images from URL.

  • Recent actief   0 leden

    • Er zijn hier geen geregistreerde gebruikers aanwezig.
×
×
  • Create New...