Topic: Gallery SimpleViewer inside a jquery dialog.. help

Hi,

it is possible to open the Gallery SimpleViewer inside a jquery dialog?
I tried but I can not see it:

PAGE1 ------------------------------
<script type="text/javascript" src="../flash/svcore/js/simpleviewer.js"></script>
..
<script type="text/javascript">
$(function() {
    $('.opendialog).click(function(event) {
        var $link = $(this);
        var $dialog = $('<div></div>')
                .load($link.attr('href') + ' #content')
                .dialog({
                    autoOpen: false,
                    title: $link.attr('title'),
                    width: 600,
                });
        $dialog.dialog('open');
        event.preventDefault();
    });
});
</script>

PAGE2 (Gallery SimpleViewer ) --------------
<div id="content">
  <script type="text/javascript">
    var flashvars = {};
    flashvars.galleryURL = "gallery.xml";
    $(function () {
        simpleviewer.load('sv-container', '550', '590', 'transparent', true, flashvars);
    });
  </script>
    <div id="sv-container"></div>
</div>

--

Where is the mistake?
Can you help?


Thank you very much

Mark

Re: Gallery SimpleViewer inside a jquery dialog.. help

It looks like there is a missing single quote from this line:

$('.opendialog).click(function(event) {

It should be:

$('.opendialog').click(function(event) {

Also, are you loading 'simpleviewer.js' on page 2 or just on page 1?
It looks like you should be loading it on page 2.

You could also try:

$(function () {
    simpleviewer.ready(function () {
        simpleviewer.load('sv-container', '100%', '100%', '222222', true);
    });
});
Steven Speirs
SimpleViewer Support Team.

Re: Gallery SimpleViewer inside a jquery dialog.. help

thanks for the help:

It looks like there is a missing single quote from this line:

    $('.opendialog).click(function(event) {

sorry, error in the copy and paste .. ok

Also, are you loading 'simpleviewer.js' on page 2 or just on page 1?
It looks like you should be loading it on page 2.

yes, you should see in the gallery Page 2 (It is loaded into the dialog jQuery UI)

You could also try:

$(function () {
    simpleviewer.ready(function () {
        simpleviewer.load('sv-container', '100%', '100%', '222222', true);
    });
});

The gallery not see inside the dialog.
while other parts are normally loaded the page (text and images)

Re: Gallery SimpleViewer inside a jquery dialog.. help

Please post the URL to your web page so that we can take a look at the complete code (and structure of your web site) and help further.

Steven Speirs
SimpleViewer Support Team.

Re: Gallery SimpleViewer inside a jquery dialog.. help

Here is a page which successfully loads a SimpleViewer gallery into a jQuery dialog window.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="jquery-ui-1.8.18.custom.min.js"></script>
    <title>jQuery Dialog Test</title>
</head>
<body>
    <script type="text/javascript">
        function openDialog() {
           $("#sv-container").dialog({modal:true});
        } 
    </script>
    <script type="text/javascript" src="svcore/js/simpleviewer.js"></script>
    <script type="text/javascript">
        simpleviewer.ready(function () {
            simpleviewer.load('sv-container', '400', '400', '222222', true);
        });
    </script>
    <div id="sv-container" style="display: none;"></div>
    <div><a href="#" onclick="openDialog();">Click Here To Open Gallery In jQuery Dialog</a></div>
</body>
</html>
Steven Speirs
SimpleViewer Support Team.

Re: Gallery SimpleViewer inside a jquery dialog.. help

thank Steven for your help

your example is right, it works

But the problem occurs when you load the pag2 (only the contents of DIV #content') where there are elements and SimpleViewer:

$(function() {
    $('.opendialog).click(function(event) {
        var $link = $(this);
        var $dialog = $('<div></div>')
                .load($link.attr('href') + ' #content')

                .dialog({
                    autoOpen: false,
                    title: $link.attr('title'),
                    width: 600,
                });
        $dialog.dialog('open');
        event.preventDefault();
    });
});

I found that with the method ".load" scripts venogono removed, maybe that is the problem that runs the gallery:

Jquery: http://api.jquery.com/load/

When calling .load() using a URL without a suffixed selector expression, the content is passed to .html() prior to scripts being removed. This executes the script blocks before they are discarded. If .load() is called with a selector expression appended to the URL, however, the scripts are stripped out prior to the DOM being updated, and thus are not executed.

you know a way to fix?
Perhaps with method ".GetScript" ? But how?


Mark

Re: Gallery SimpleViewer inside a jquery dialog.. help

Have you tried loading the contents of a different <div> (which does not contain a gallery) using your code to make sure that the code itself is OK?
Are you actually trying to load the #content <div> gallery from a different page? If so, then is var $link = $(this); simply an example for posting purposes or is it the actual code you are using (on page #1)? $link.attr('href') seems to be undefined when it is called in the .load() line.
It might help if we were able to see the complete code you are using and the structure of your page(s).
In the meantime, perhaps someone more familiar with jQuery UI reading this may be able to help further.

Steven Speirs
SimpleViewer Support Team.

Re: Gallery SimpleViewer inside a jquery dialog.. help

yes, I tried, the items are loaded correctly in Dialog (text, images, etc. ..) except the gallery

here is the sample code:

PAGE 1:

...
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="../svcore/js/simpleviewer.js"></script>    //// comment: this line I'm not sure that is correct  ////
..
<script type="text/javascript">  
$(function() {
    $('.opendialog').click(function(event) {
        var $link = $(this);
        var $dialog = $('<div></div>')
                .load($link.attr('href') + ' #content')
                .dialog({
                    autoOpen: false,
                    title: $link.attr('title'),
                    width: 800,
     });
        $dialog.dialog('open');
        event.preventDefault();
    });
});
  </script>

...

<a href="page2.html" class="opendialog" title="PAGE 2 ">OPEN DIALOG</a>

PAGE 2

...

<div id="content">  //// comment:  (content that is invoked by the function "OpenDialog" and loaded into the dialog)  ////

<script type="text/javascript" src="../svcore/js/simpleviewer.js"></script>
  <script type="text/javascript">
    var flashvars = {};
    flashvars.galleryURL = "gallery.xml";
    $(function () {
        simpleviewer.load('sv-container', '550', '590', 'transparent', true, flashvars);
    });
  </script>

    <div id="sv-container"></div>   //// comment: not loaded, because I think that is not loading the scripts ////

TEXT TEXT TEXT    //// comment: is loaded correctly  ////

IMAGE    //// comment: is loaded correctly  ////

other...  //// comment: is loaded correctly  ////

</div>
...

Re: Gallery SimpleViewer inside a jquery dialog.. help

Thank you. I am now able to replicate your problem.
As yet, the only workarounds I have found are to either:
(1) Move the <div id="content"> from Page #1 to Page #2 (as in my code above), or...
(2) Load the entire Page #2 into the dialog using an <iframe> such as:

<script type="text/javascript">  
  $(function() {
    $('.opendialog').click(function(event) {
      var $link = $(this);
      var $dialog = $('<iframe src="' + $link.attr('href') + '" width="800" height="600" frameborder="0" scrolling="no"></iframe>')
        .dialog({
          autoOpen: false,
          title: $link.attr('title'),
          width: 800
        });
      $dialog.dialog('open');
      event.preventDefault();
    });
  });
</script>
Steven Speirs
SimpleViewer Support Team.

Re: Gallery SimpleViewer inside a jquery dialog.. help

thanks for the solutions!

would be good to be able to find a way to load gallery everything through ajax (pass the scripts)

There will be a method?



Mark

Re: Gallery SimpleViewer inside a jquery dialog.. help

There will be a method?

It seems more of a general issue with the jQuery load() function and JavaScript than an issue specific to SimpleViewer so perhaps there is more information available elsewhere on the internet that would help.
If I find a method that works, I will be sure to post back in this thread.

Steven Speirs
SimpleViewer Support Team.