Fancybox openen vanuit div onclick

[radicalgamer]

Hoi,

Ik heb nu een uur of drie door allerlei voorbeelden gewerkt en vanalles in elkaar geflanst om tot de conclusie te komen dat ik Fancybox alleen via een anchor kan openen...
Maar ik heb een pagina waarop een lijst van agenda items onder elkaar staan, ieder item in een div en nou wil ik dus dat als je klikt op een div dat er dan een Fancybox opent met daarin details over dat agenda item.
Alleen vind ik een anchor linkje in elk item met 'Open' oid niet erg netjes, het werkt wel, omdat het anchors zijn, maar het ziet er niet uit

Ik heb ook geprobeerd per item nog een verborgen div te maken met daarin de anchor en als dan het agenda item wordt aangeklikt de onclick een klik op de link simuleert, wat in IE werkte maar Firefox crashte erop en Chrome en Opera deden niets.......

Het moet toch wel mogelijk zijn om een Fancybox te tonen door op een div te klikken?

(En ja het is laat zo druk ben ik ermee...)

 

[Tha Devil]

Gelukkig kun je anchors gewoon via CSS stijlen

Misschien handiger om met code aan te geven hoe de structuur is en wat je geprobeerd hebt

 

[radicalgamer]

Tja ik heb de standaard fancybox stylesheet en javascript/jQuery bestanden gelinkt en probeer:

<div onclick="Display('.$row['ticketid'].')" href="load.php?id='.$row['ticketid'].'" onmouseover="this.style.background=\'#9F92FE\';" onmouseout="this.style.background=\'#E2DEFF\';" style="padding:5px; border-radius:15px; background:#E2DEFF">'.$row['title'].'<a class="various fancybox.ajax"  href="load.php?id='.$row['ticketid'].'">Open</a></div>

(De anchor met de text 'Open' is voor testdoeleinden, deze werkt namelijk wel, maar het moet dus niet met de anchor maar met div onclick gebeuren...

Dit staat in een 'while($row = mysqli_fetch_array($ils))' na een MySQL query en wordt dus per agenda item herhaald waardoor je een rij met Div's krijgt.
Zodra je daar met de muis overheen gaat wordt de kleur wat donkerder zodat duidelijk wordt dat het knoppen zijn, en uiteraard moet de 'knop' ook klikbaar zijn
Dus het onclick="Display()" is een poging om vanuit javascript de fancybox te openen, maar dat geeft geen href tag door, dus heb ik die in de div geplakt...
Ook heb ik data-href, data-fancybox-href en data-fancy-href gebruikt welke volgens een aantal topics hierover zouden werken, maar helaas...

Maar als ik een anchor kan stylen om zoals de div te ogen is dat ook goed, maar dan moet niet alleen de text klikbaar zijn.


Mijn poging om het via een verborgen anchor te doen:

		<div style="display: none;">
			<a class="fancylink" href="testfile.txt"></a>
		</div>
^ De verborgen anchor

		<div style="cursor: pointer;" onclick='$("a.fancylink").trigger
("click");'>open fancybox from division</div>


^ En de onclick die een jQuery trigger uitvoert

 

[Tha Devil]

Waarom pas je het op je DIV toe dan?

In feite kun je de A ook tonen zoals je de DIV wilt hebben. Dan behoudt je namelijk de standaardfunctionaliteit van een link en heb je toch je opmaak getackeld

Je weet dat je beter opmaak kunt scheiden van je HTML door middel van CSS-klasses? Je gebruikt nu namelijk nog aardig wat inline-code (Zowel CSS als Javascript). De onmouseover/out kun je simpel vervangen door een klasse met de pseudo-selector ":hover".

.agendapunt { padding:5px; border-radius:15px; background:#E2DEFF; }
.agendapunt:hover { background: #9F92FE; }

echo '<a class="agendapunt" onclick="Display('.$row['ticketid'].')" href="load.php?id='.$row['ticketid'].'">'.$row['title'].'</a>';

[js]$(".agendapunt").fancybox({
type: 'ajax',
});[/js]

Dat ruimt al aardig op toch?

 

[radicalgamer]

Ja excuses daarvoor, ik gooi de css altijd in de tags als ik ermee knutsel, zodra het dan werkt voer ik het netjes in een sheet

Maar ik probeer nu inderdaad de anchor als de div te vermommen

Trouwens, ik kan de class niet veranderen, die moet op 'fancybox' staan zodat die gelinkt is, er is toevallig geen manier om twee classes toe te wijzen neem ik aan?...
(Had de javascript code niet goed doorgelezen...)

Edit: Het werkt, ik heb toch maar onmouseover en onmouseout tags gebruikt welke de id van de anchor mee geven aan een javascript functie.
De ID's worden in de PHP toegewezen (1 tot en met 30).

Enorm bedankt Tha Devil