Jul 21

Drupal Tip: Lightbox pop-up on page load

Just like I was, a lot people have been seeking around the web for an easy way of invoking a lightbox as a page loads.

Examples including http://www.bram.us/demo/projects/autofirelightbox/ uses javascript to trigger the lightbox. However, scripts like this one does not work with Drupal’s Lightbox 2 module.

Here is what I used to accomplish this in Drupal, by using  JQuery’s triggerHandler function to invoke the click. Hope this will help others who need an auto lightbox pop-up.

<a rel="lightframe" href="" id="link"></a>
<script type="text/javascript">
   $(document).ready(function () {
     $('#link').triggerHandler("click");
   });
</script>

Popularity: 8% [?]

Posted in: Development, Me, PHP.
Tagged: · · ·

This entry was posted on Wednesday, July 21st, 2010 at 5:22 pm and is filed under Development, Me, PHP. You can follow any responses to this entry through the RSS 2.0 feed.You can leave a response, or trackback from your own site.

←
→
  • http://bluedeals.info Florencio Salmonsen

    Great post!

  • http://www.drupal-themes.adodis.com Drupal Themes

    That seems to be a cool option and thanks for providing the code for that. I will ask my developer to test this code and will let you know about its working…

  • KostasK

    I ve recently had to implement this behaviour for a website and used the exact same method. It has been working fine for the last 12 months.

  • Naeluh

    p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica; min-height: 14.0px}
    p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica}

    Hi Frank and other commenters,

    I wanted to create something where it would use this lightbox on page load script to open on pages of a certain content type that were not accessible by anonymous users. Basically I wanted it to force people to register and then when they finish registering the light box would fade and it would immediately allow access to the page. Is this possible with this script. Do you have any insight to how to accomplish this? Is there some documentation that would help anywhere?

    thanks for all your help!

    Nick

  • http://www.frankleng.me Frank Leng

    sorry for the delay in replying. 
    What you can do is add my lightbox trigger to the permission error page. the lightbox itself will point to the registration page.

    In terms of fading the box after registration. I would suggest just doing a simple PHP based redirect to the original page.

    Either way, you might have to hack the Drupal permission module a little bit.

  • Mananthnov

    I have written light box on page load. its working fine. i need to set timeout to load lightbox. how do i do it?. code given below.

    Script :

    var face12 = jQuery.noConflict();
    face12(document).ready(function(){

            face12.fn.popOpen = function(){

            popID = face12(this).attr(‘rel’); //Get Popup Name
            popURL = face12(this).attr(‘href’); //Get Popup href to define size

            //Pull Query & Variables from href URL
            query= popURL.split(‘?’);
            dim= query[1].split(‘&’);
            popWidth = dim[0].split(‘=’)[1]; //Gets the first query string value

            //Fade in the Popup and add close button
           face12(‘#’ + popID).fadeIn().css({ ‘width’: Number( popWidth ) }).prepend(”);

            //Define margin for center alignment (vertical + horizontal) – we add 80 to the height/width to accomodate for the padding + border width defined in the css
            var popMargTop = (face12(‘#’ + popID).height() + 0) / 2;
            var popMargLeft = 120;

            //Apply Margin to Popup
            face12(‘#’ + popID).css({
                ‘margin-top’ : -popMargTop,
                ‘margin-left’ : -popMargLeft
            });

            //Fade in Background
            face12(‘body’).append(”); //Add the fade layer to bottom of the body tag.
           face12(‘#fade’).css({‘filter’ : ‘opacity:0.99;alpha(opacity=80)’}).fadeIn(); //Fade in the fade layer

        };

        //When you click on a link with class of poplight and the href starts with a #
        face12(‘a.poplight[href^=#]‘).click(function() {
            face12(this).popOpen(); //Run popOpen function on click
            return false;
        });

        face12(‘a.poplight[href=#?w=450]‘).popOpen(); //Run popOpen function once on load

        //Close Popups and Fade Layer
        face12(‘a.close, #fade’).live(‘click’, function() { //When clicking on the close or fade layer…
              face12(‘#fade , .popup_block’).fadeOut(); //fade them both out
            face12(‘#fade’).remove();
            return false;
        });

        //popOpen

    });
    function f_this123()
    {
        setTimeout(“document.getElementById(‘popup3′).style.display = ‘none’”, 30000);

    }

    Html :


       
        Close
       

  • Pingback: druapl

See also: