How to make a link to execute a jQuery?

Question

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...

have you seen http://stackoverflow.com/a/9030970/1055987? it may need a bit tweaking though — JFK, Sep 08 '13 at 23:31
for a link like this `http://www.mysite.com/#galleryone` you only need to add this to your 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). — JFK, Sep 09 '13 at 00:12
Yes, JFK, it DID WORK with this code yaaaayyyyy!!! The only thing is that, for some reason, 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). But, that response you gave on the other question (stackoverflow.com/a/9030970/1055987) works perfectly. I'll try that then come back. — OleSchmitt, Sep 09 '13 at 14:09
JFK, I will not be able to mark your answer as correct because it's in a comment. — OleSchmitt, Sep 09 '13 at 14:09
Please, JFK, take a look: [http://www.oleschmitt.com.br/novo/imagem/](http://www.oleschmitt.com.br/novo/imagem/) and click in any gallery to see how it is/should allways be. Than try to access: [http://www.oleschmitt.com.br/novo/imagem/#moda](http://www.oleschmitt.com.br/novo/imagem/#moda) — OleSchmitt, Sep 09 '13 at 14:26
Is a hoisting issue, this is why I asked you to place the script AFTER the fancybox init. Try moving the call ` — JFK, Sep 09 '13 at 16:27

score 1 · Answer 1 · answered Sep 08 '13 at 14:06

1

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.

answered Sep 08 '13 at 14:06

Rashi Abramson

1,127
8
16

Funny, the only person who seems to have understood the question got a -1 ??? (most likely the person who down voted this answer didn't understand the question) – JFK Sep 08 '13 at 23:36
Yes, I was thinking the same thing JFK. And as nobody seemed to understand my question, I've took a long time uploading my website to my webserver, so people could SEE it. – OleSchmitt Sep 09 '13 at 14:14

score 1 · Accepted Answer · answered Sep 09 '13 at 16:35

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.

How to make a link to execute a jQuery?

2 Answers2