CODEWITHSUNDEEP
jqueryhtmlhyperlinkfancyboxfancybox-2
OleSchmitt
OleSchmitt

Reputation: 175

How to make a link to execute a jQuery?

I have a single page with several links opening different fancybox galleries.

Each gallery is "activated" by clicking on a link like the following (in this case for "galleryone"):

<a class="manualfancybox" data-gallery="galleryone" name="galleryone" id="galleryone" href="#galleryone">
    <img src="imageToClickToOpenGallery.png" />
</a>

Each gallery (in this case "galleryone") is created by the following code:

<div id="galleryone">
    <a href="001.jpg" rel="gal_one" class="fancybox" /></a>
    <a href="002.jpg" rel="gal_one" class="fancybox" /></a>
    […]
    <a href="020.jpg" rel="gal_one" class="fancybox" /></a>
</div>

When the user clicks "imageToClickToOpenGalleryOne.png" it opens "galleryone" fancybox in fullscreen (thanks again JFK. That's ok, that's exactly as it should be.

"Manual Fancybox" uses the following jquery:

/* MANUALFANCYBOX by JFK (https://stackoverflow.com/users/1055987/jfk) */
$(document).ready(function () {
    $(".manualfancybox").on("click", function () {
        var gallery = "#" + $(this).data("gallery");
        $(gallery).find(".fancybox").eq(0).click();
        return false;
    });
});

QUESTION: How can I make a link, like http://www.mysite.com/#galleryone to open "galleryone" like if the user has accessed my page and clicked on "imageToClickToOpenGalleryOne.png"?

Javascript, jquery, php… .htaccess?? I myself am not being able event to think it, let alone to achieve a solution…

Maybe it's not even possible due to security reasons, but nevertheless I need a solution to share links to my galleries...

Upvotes: 0

Views: 159

Answers (2)

JFK
JFK

Reputation: 41143

for a link like this 

http://www.mysite.com/#galleryone

you only need to add this to your current code : 

if(window.location.hash) { 
    $(window.location.hash).trigger('click'); 
}

IMPORTANT : just make sure you place this AFTER the fancybox() initialization (or at the end of your ready() method).

EDIT : the OP said :

it's working but it's not showing the gallery background anymore, 
therefore I can't click anywhere outside the image 
to close the image window (it does work with "ESC" key though).

It seems to be hoisting issue, try placing your script calls in this order :

<script src="../scripts/jquery.fancybox.min.js" type="text/javascript"></script> 
<script src="../scripts/scripts.js" type="text/javascript"></script>

Fancybox should be called before the scripts.js where you placed the $(window.location.hash).trigger('click'); code. Right now scripts.js is called first.

Upvotes: 1

Rashi Abramson
Rashi Abramson

Reputation: 1257

You want to use the fragment identifier in the url. To get that, use the window.location.hash to get everything from the hash symbol on, ex: "http://example.com#foobar" has a location.hash of "#foobar". You can check the [window.onhashchange][1] event to see if the hash has changed. You can then parse the hash and load whatever you need.

Upvotes: 1

Related Questions