WordPress.org

Ready to get started?Download WordPress

Forums

jQuery Lightbox
[resolved] Show lightbox on page load with Anchor (13 posts)

  1. martinlbb
    Member
    Posted 3 years ago #

    Hi there,

    I'm trying to fire up lightbox when a page load, using anchor to specify good image to show up.

    However, it won't work... I've tried many things, without success :(

    Here is an example:

    Page is called with anchor added to page name. Ie: http://www.mysite.com/portfolio/#les-quais.jpg

    HTML part:
    <img title="Les quais" alt="Les quais" src="/portfolio/test-photo/thumbs/thumbs_les-quais.jpg" width="200" height="133" />

    Javascript:
    window.onload = gotoanchor();

    function gotoanchor(){
    //Get element, using ID (where ID = anchor name)
    var idd = document.getElementById(document.location.hash.substring(1));
    //Launch lightbox
    $.Lightbox.start(idd)
    }

    Any ideas?

    http://wordpress.org/extend/plugins/jquery-lightbox-balupton-edition/

  2. martinlbb
    Member
    Posted 3 years ago #

    Any ideas ?

  3. Pedro Lamas
    Member
    Plugin Author

    Posted 3 years ago #

    I'd suggest you guive an ID to the link and use jquery with it!

    <script type="text/javascript">
    $('#my_link_id').click()
    </script>
  4. martinlbb
    Member
    Posted 3 years ago #

    Following your suggestion, I tried this:
    <a id="les-quais.jpg" name="les-quais.jpg" href="/portfolio/test-photo/les-quais.jpg" title="A Lyon" rel="lightbox[test-photo]" ><img title="Les quais" alt="Les quais" src="/portfolio/test-photo/thumbs/thumbs_les-quais.jpg" width="200" height="133" /></a>

    And then in Javascript (short version, I removed autoload):

    <script type="text/javascript">
    $('#les-quais.jpg').click()
    </script>

    Nothing happened, I just have an error in my console:
    Error: $("#les-quais.jpg") is null.

  5. martinlbb
    Member
    Posted 3 years ago #

    BTW, jquery is already used in my WordPress blog.

  6. Pedro Lamas
    Member
    Plugin Author

    Posted 3 years ago #

    My friend, you cannot use that id (with a dot!!!)

    You can use "les-quais-jpg" if you'd like, but the "." is reserved and cannot/shouldn't be used in id's!

  7. martinlbb
    Member
    Posted 3 years ago #

    Sometimes, I'm too dumb!

    Thanks Pedro for this usefull help!

    BTW, I think I can't use $, but I have to use jQuery instead of.

  8. Pedro Lamas
    Member
    Plugin Author

    Posted 3 years ago #

    No problem, and yes, in case of doubt, just use "jQuery()" (case-sensitive!) instead of "$()"

  9. martinlbb
    Member
    Posted 3 years ago #

    Ok I modified my code.

    <a id="les-quais" name="les-quais" href="/portfolio/test-photo/les-quais.jpg" title="A Lyon" rel="lightbox[test-photo]"  >
    <img title="Les quais" alt="Les quais" src="/portfolio/test-photo/thumbs/thumbs_les-quais.jpg" width="200" height="133" /></a>

    And JS:
    jQuery('#uap').click();

    No error in Console, but nothing show up.
    If I try jQuery('#uap').start(); I get 'is not a function'.

    From my memory, click is not allowed in Firefox. Maybe is it linked?

  10. Pedro Lamas
    Member
    Plugin Author

    Posted 3 years ago #

    Err... on your sample here, your id's do not match!! In the "a" element you have:
    id="les-quais"
    but in jquery:
    jQuery('#uap')

    Just set the same id in both (and don't forget the "#" sign in jquery) and all will work ok! I just tested with Firefox 4 and works fine!!! :)

  11. martinlbb
    Member
    Posted 3 years ago #

    Sorry, copy/paste error.

    But now, it works. And I found my error:

    I was using window.onload, who trigger too early I think.

    Using jQuery(document).ready, It works perfectly!

    Example:

    <script type="text/JavaScript">
    jQuery(document).ready(function(){
      jQuery(document.location.hash).click();
    });
    </script>

    Thanks for your help Pedro :)

  12. Pedro Lamas
    Member
    Plugin Author

    Posted 3 years ago #

    Glad all worked well!!! :)

  13. gulflee
    Member
    Posted 3 years ago #

    i works tq

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic