开发者

joomla lightbox on page load

开发者 https://www.devze.com 2023-01-17 07:13 出处:网络
has anyone fire开发者_如何学C up lightbox on pageload using Joomla 1.5? I want to build a plugin to fire Lightbox of an article when page load, but have no idea hw to do thatIt is actually quite simp

has anyone fire开发者_如何学C up lightbox on pageload using Joomla 1.5?

I want to build a plugin to fire Lightbox of an article when page load, but have no idea hw to do that


It is actually quite simple, when you know what you are doing. Below is a sample code that is native to Joomla 1.5 using Mootools 1.1 and modal behavior.

If you want to use only SlimBox, then you will have to figure things out on your own. All the SlimBoxes are little different...


In order for us to open up a modal window we need to do 2 things.

Fist, include JavaScript libraries and stylesheets. In our case we will include modal.js

<?php
// You do know need to include mootools explicitly
// JHTML::_('behavior.modal') will include mootools library.
JHTML::_('behavior.modal');
?>

Second, include JavaScript to open the modal window. IF you are including JS from PHP, better use JFactory::getDocument()->addScriptDeclaration("// JavaScript Goes Here"); to include the script into the HEAD of the document.

<script type="text/javascript">

// Use either domready or load event to open the modalbox
window.addEvent('domready', function(){
    var myAnchor = new Element('a', {
        'href': 'http://www.google.com',
        'class': 'myClass',
        'rel' : "{handler: 'iframe', size: {x: 800, y: 550}}"
    });
    SqueezeBox.fromElement(myAnchor);
});
</script>


Another scenario is when you have an existing modal link on the page and you want to display the modal on page load. Use:

window.addEvent('domready', function(){
    SqueezeBox.fromElement(document.getElementById('modalID'));
});

Where link exists:

<a class="modal" name="modalID" id="modalID" rel="{handler: 'iframe', size: {x: 400, y:     400}}" href="index.php?option=com_mycomponent&task=mytask&tmpl=component">Link Text</a>"

This display the modal onload and has link to reopen modal

0

精彩评论

暂无评论...
验证码 换一张
取 消