CODEWITHSUNDEEP
jqueryjquery-uijquery-pluginslightbox
Sathish
Sathish

Reputation: 4713

jquery UI Lightbox not working in IE

Hi i'm using the following jquery UI Lightbox this code is not working in IE refered from http://www.class.pm/files/jquery/jquery.ulightbox/demo/ 

<script type="text/javascript" src="js/jquery.ulightbox.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.ulightbox.css" /> 
 <script type="text/javascript">
 $(document).ready(function() {
 uLightBox.init({
  override:true,
  background: 'white',
  centerOnResize: true,
  fade: true
 });

 $('#alert').click(function() {
  alert('Hello');
  });
 });
 </script>

is there any option to work out this in IE?

Upvotes: 0

Views: 1110

Answers (1)

user1419445
user1419445

Reputation:

You're right: the "uLightBox" plugin (or "ClassyLightbox", as it's currently named) doesn't work with Internet Explorer (at least with versions 8 and 9), since it throws a JavaScript error.
However, I've managed to make it work this way:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/jquery.classylightbox.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
        <script src="js/jquery.classylightbox.js"></script>
        <script type="text/javascript">
        function alert(val){ 
            ClassyLightbox.alert({ title: 'Alert', text: val, rightButtons: ['OK'] }); 
        }

        $(document).ready(function() {
            ClassyLightbox.init({
                override: false,
                background: 'white',
                centerOnResize: true,
                fade: true
            });

            $('#alert').click(function() {
                alert('Hello World');
            });
        });
        </script> 
    </head>
    <body>
         <input id="alert" type="button" value="Click Me" />
    </body>
</html>

In my example I've used the latest version of the plugin, downloaded from here.
Then I've set override to false and redefined the alert() function to invoke the ClassyLightbox.alert method.
If you're using an older version of the plugin, you should do it this way:

<script type="text/javascript">
function alert(val){ 
    uLightBox.alert({ title: 'Alert', text: val, rightButtons: ['OK'] }); 
}

$(document).ready(function() {
    uLightBox.init({
        override: false,
        background: 'white',
        centerOnResize: true,
        fade: true
    });

    $('#alert').click(function() {
        alert('Hello World');
    });
});
</script>

The drawback of this solution is that you can no longer change the background color; in other words when override is set to false, the background property is ignored.

Upvotes: 1

Related Questions