Topic: Simpleviewer will not work when inside a jquery tab

I want to put the simpleviewer inside a jquery tab but it does not show up / work. If i take the viewer out of the jquery tab it works correctly.

FYI - The tabs did not work at all when the simpleviewer code was present on the page all until I removed the jquery .js file from the simpleviewer directory - My page was already loading jquery (jquery-1.4.2.js) and I think the page was loading 2 versions of the jquery causing a conflict.

The problem has been tested in all browsers. This website is on an internal development server therefore I am unable to provide a url.

There are 3 code segments below as follows:
- simple viewer outside jquery tabs - works ok
- simpleviewer inside jquery tab - does not work
- firebug inspection of the code when inside a jquery tab

Here is the code I am using below where the code is outside the jquery tabs which works:

<div id="sv-container" style="height: 345px;width:850px;background-color:#c9c9c9"">loading the viewer...</div>          
<!--START SIMPLEVIEWER EMBED.-->
<script type="text/javascript">
    var svCoreURL = '../simpleviewer/svcore/';
</script>
<script type="text/javascript" src="../simpleviewer/svcore/js/simpleviewer.js"></script>
<script type="text/javascript">                var flashvars = {};
    flashvars.galleryURL = "gallery.xml";
    var params = {};
    params.wmode = "transparent";
    var attributes = {};
    attributes.id = "svInstance";
    $(document).ready(function () {
        SV.simpleviewer.load("sv-container", "850", "345", "222222", true, flashvars, params, attributes);
    });
</script>
<!-- END SIMPLEVIEWER EMBED -->

<!-- the tabs -->
<ul class="tabs">
    <li><a class="s" onfocus="this.blur()" href="#">Photos</a></li>
    <li><a class="s" onfocus="this.blur()" href="#">Video</a></li>
    <li><a class="s" href="#">FAQ's</a></li>
    <li><a class="m" href="#">The Science Behind</a></li>
    <li><a class="m" href="#">How to Apply</a></li>
    <li><a class="m" href="#">Ingredients</a></li>
</ul>

<!-- tab "panes" -->
<div class="panes">
    
    <div>Tab 1 -  #### WANT TO PUT SIMPLEVIEWER HERE #####</div>

    <div  style="background-color:#313131">
 
        <div id="container">Loading the player ...</div>
        <script type="text/javascript">
            jwplayer("container").setup({
                flashplayer: "/jwplayer/player.swf",
            
                skin: "/jwplayer/modieus.zip",
                playlist: [
                    { duration: 32, file: "/jwplayer/videos/30_Sec_Comm_Web.flv", image: "/uploads/video.jpg" },
                    { duration: 124, file: "/jwplayer/videos/30_Sec_Comm_Web2.flv", image: "/uploads/bbb.jpg" },
                    { duration: 124, file: "/jwplayer/videos/30_Sec_Comm_Web2.flv", image: "/uploads/bbb.jpg" },
                    { duration: 542, file: "/jwplayer/videos/julianne_222_159.flv", image: "/uploads/ed.jpg" }
                    ],
                plugins: {
                    sharing: { link: true }
                },
                "playlist.position": "right",
                "playlist.size": 300,
                height: 350,
                width: 880
            });
        </script>
    
    </div>
    <div>Tab 3 html</div>
    <div>Tab 4 html</div>
    <div>Tab 5 html</div>
    <div>Tab 6 html</div>
</div>

Here is the page source with the simpleviewer inside the jquery tabs which does NOT work

<!-- the tabs -->
<ul class="tabs">
    <li><a class="s" onfocus="this.blur()" href="#">Photos</a></li>
    <li><a class="s" onfocus="this.blur()" href="#">Video</a></li>
    <li><a class="s" href="#">FAQ's</a></li>
    <li><a class="m" href="#">The Science Behind</a></li>
    <li><a class="m" href="#">How to Apply</a></li>
    <li><a class="m" href="#">Ingredients</a></li>
</ul>
 
<!-- tab "panes" -->
<div class="panes">
    
    <div id="sv-container" style="height: 345px;width:850px;background-color:#c9c9c9"">loading the viewer...</div>          
        <!--START SIMPLEVIEWER EMBED.-->
        <script type="text/javascript">
            var svCoreURL = '../simpleviewer/svcore/';
        </script>
        <script type="text/javascript" src="../simpleviewer/svcore/js/simpleviewer.js"></script>
        <script type="text/javascript">    var flashvars = {};
            flashvars.galleryURL = "gallery.xml";
            var params = {};
            params.wmode = "transparent";
            var attributes = {};
            attributes.id = "svInstance";
            $(document).ready(function () {
                SV.simpleviewer.load("sv-container", "850", "345", "222222", true, flashvars, params, attributes);
            });
        </script>
        <!-- END SIMPLEVIEWER EMBED -->
 
    <div  style="background-color:#313131">
 
        <div id="container">Loading the player ...</div>
        <script type="text/javascript">
            jwplayer("container").setup({
                flashplayer: "/jwplayer/player.swf",
            
                skin: "/jwplayer/modieus.zip",
                playlist: [
                    { duration: 32, file: "/jwplayer/videos/30_Sec_Comm_Web.flv", image: "/uploads/video.jpg" },
                    { duration: 124, file: "/jwplayer/videos/30_Sec_Comm_Web2.flv", image: "/uploads/bbb.jpg" },
                    { duration: 124, file: "/jwplayer/videos/30_Sec_Comm_Web2.flv", image: "/uploads/bbb.jpg" },
                    { duration: 542, file: "/jwplayer/videos/julianne_222_159.flv", image: "/uploads/ed.jpg" }
                    ],
                plugins: {
                    sharing: { link: true }
                },
                "playlist.position": "right",
                "playlist.size": 300,
                height: 350,
                width: 880
            });
        </script>
    
    </div>
    <div>Tab 3 html</div>
    <div>Tab 4 html</div>
    <div>Tab 5 html</div>
    <div>Tab 6 html</div>
</div>
 
 
<!-- This JavaScript snippet activates tabs -->
<script>
    // perform JavaScript after the document is scriptable.
    $(function () {
        // setup ul.tabs to work as tabs for each div directly under div.panes
        $("ul.tabs").tabs("div.panes > div");
    });
</script>


Here is the inspected code from Firebug when the simpleviewer in embedded in the tabs

<div style="height: 345px; width: 850px; background-color: rgb(201, 201, 201); display: block;" id="sv-container">
<div id="sv-mobile-flash" style="height: 345px;"><object height="345" width="850" type="application/x-shockwave-flash" id="svInstance" data="../simpleviewer/svcore/swf/simpleviewer_icc.swf">
<param name="wmode" value="transparent">
<param name="allowfullscreen" value="true">
<param name="allowscriptaccess" value="always">
<param name="bgcolor" value="222222">
<param name="flashvars" value="galleryURL=gallery.xml"></object></div></div>

Re: Simpleviewer will not work when inside a jquery tab

SimpleViewer 2.1 uses jQuery for the mobile version of the gallery, that will be the source of the conflict issue. You could try using jQuery's no conflict portion of their API with the tab code or if you don't care about the mobile/non-flash gallery you could use the old embed code.

Mike Richards
SimpleViewer Support Team.

Re: Simpleviewer will not work when inside a jquery tab

I am new to most of this - not a JavaScript programmer.

I changed the following code:

<!-- This JavaScript snippet activates tabs -->
<script>
    // perform JavaScript after the document is scriptable.
    $(function () {
        // setup ul.tabs to work as tabs for each div directly under div.panes
        $("ul.tabs").tabs("div.panes > div");
    });
</script>

to this:

<!-- This JavaScript snippet activates tabs -->
<script>
    // perform JavaScript after the document is scriptable.
    $.noConflict();

    jQuery(function () {
        // setup ul.tabs to work as tabs for each div directly under div.panes
        jQuery("ul.tabs").tabs("div.panes > div");
    });
</script>

This did not stop the issue. What did I do wrong?

Re: Simpleviewer will not work when inside a jquery tab

Try:

<!-- This JavaScript snippet activates tabs -->
<script>
    // perform JavaScript after the document is scriptable.
    jQuery.noConflict();
    jQuery(function () {
        // setup ul.tabs to work as tabs for each div directly under div.panes
        jQuery("ul.tabs").tabs("div.panes > div");
    });
</script>

As described here: http://docs.jquery.com/Using_jQuery_wit … 4-function
I'm not sure it'll help (as $ is an alias for jQuery) but it can't hurt to try.

Steven Speirs
SimpleViewer Support Team.

Re: Simpleviewer will not work when inside a jquery tab

hmmm. No difference. Still just a blank div with a gray background.

Re: Simpleviewer will not work when inside a jquery tab

What happens if you add $.noConflict(); to the SimpleViewer embed code?

http://www.simpleviewer.net/forum/viewt … 455#p30455

Mike Richards
SimpleViewer Support Team.

Re: Simpleviewer will not work when inside a jquery tab

I tried moving the  jQuery.noConflict(); into the simpleviewer code:

<script type="text/javascript">                var flashvars = {};
    jQuery.noConflict();
    flashvars.galleryURL = "gallery.xml";
    var params = {};
    params.wmode = "transparent";
    var attributes = {};
    attributes.id = "svInstance";
    jQuery(document).ready(function () {
        SV.simpleviewer.load("sv-container", "850", "345", "222222", true, flashvars, params, attributes);
    });
</script>
<!-- END SIMPLEVIEWER EMBED -->

Then the tabs stopped working unless i replaced the

$

in my tab code with

jQuery

which puts me back to square one.

I am not sure i understand the problem - I feel like I am chasing my shadow. Is there a function in the simpleviewer.js code that conflicts with the jQuery? I have one jQuery lib (jquery-1.4.2.js) and both routines use the same one. Where is the conflict? I really want to get this solved.

I must have comparability with iPad and iPhone so the old embed code is not an option.

Re: Simpleviewer will not work when inside a jquery tab

For reference, my SV looks like this:

<div id="apDiv1">
<!--START SIMPLEVIEWER EMBED.-->
<script type="text/javascript" src="svcore/js/simpleviewer.js"></script>
<script type="text/javascript">
$.noConflict();
$(document).ready(function () {
SV.simpleviewer.load("apDiv1", "625", "570", "313131", true);
});
</script>
<!-- END SIMPLEVIEWER EMBED -->
</div>

Re: Simpleviewer will not work when inside a jquery tab

Thanks - that did not make a difference for me.


Once the SimpleViewer Div goes inside the tab Div, the SV player stops showing.

If I use $.noConflict(); or jQuery.noConflict(); in either code segment, the tabs no longer work.


I am trying to understand what the problem is so i can figure out what can be done. I know little to no JavaScript but if I know what I am looking for I can probably fix it.

Re: Simpleviewer will not work when inside a jquery tab

Is there any more help that can be offered in solving this issue or tips on how to troubleshoot the problem? I am using jquery.tools.min.js (http://flowplayer.org/tools/demos/tabs/index.html).

The problems arises when I place the simpleviewer pro code inside a tab.

I am not sure if this is a css issue or a code conflict.

Re: Simpleviewer will not work when inside a jquery tab

Hi,

this issue is fixed in the next version of SimpleViewer - Coming soon.

Felix Turner
SimpleViewer Support Team.

Re: Simpleviewer will not work when inside a jquery tab

Great -
 
"coming soon" - can you please give me an idea of what soon could be. I need to decide if this is a viable solution for my project or if I need to look for another product for the image viewing requirement.

Thanks
John

Last edited by jeskey (2010-10-29 06:21:36)

Re: Simpleviewer will not work when inside a jquery tab

Is this question going to be replied to?

previous post:
"coming soon" - can you please give me an idea of what soon could be. I need to decide if this is a viable solution for my project or if I need to look for another product for the image viewing requirement.

Thanks
John

Re: Simpleviewer will not work when inside a jquery tab

Sorry for not replying sooner but I'm afraid the simple answer is that I don't know when it will be released.
I realise this does not answer your query or help your situation but you have been waiting patiently for a reply, hence this post.
I can assure you that the developers are working hard to ensure that the release will be bug-free. There is no set timeframe or deadline and it will be released only when it is ready.

Steven Speirs
SimpleViewer Support Team.

Re: Simpleviewer will not work when inside a jquery tab

I appreciate the reply.

I am not trying to get a release date, I have to make a decision as to the suitability for a project I am working on as this would be a key piece..

It would have been helpful if you could have given me something like:

-- Within 30 days
-- Not sooner than 6 months
...

I must imagine even in the most casual work environments, there is some sort of target date (+worst case scenario).

..and let me know if you need a beta tester.

Re: Simpleviewer will not work when inside a jquery tab

2.1.1 ETA is next week.

Felix Turner
SimpleViewer Support Team.

Re: Simpleviewer will not work when inside a jquery tab

This should be fixed in the version that was just released, SimpleViewer 2.1.1. To upgrade delete the svCore folder from your server and upload the new svCore folder from the SimpleViewer 2.1.1 download and clear your browser's cache or you can upgrade the gallery using in the new version of svBuilder.

Mike Richards
SimpleViewer Support Team.

Re: Simpleviewer will not work when inside a jquery tab

"This should be fixed in the version that was just released, SimpleViewer 2.1.1."

Anybody tested? working with tabs, scrollable?

Thank you.

Re: Simpleviewer will not work when inside a jquery tab

Little advice. use the embedSWF

<script type="text/javascript" src="design2/header/svcore/js/swfobject.js"></script>
<script type="text/javascript">
            var flashvars = {};
            flashvars.galleryURL = "design2/header/header_www.xml";
            var params = {};
            params.allowscriptaccess = "always";
            params.bgcolor = "FFFFFF";
            params.wmode = "transparent";
            swfobject.embedSWF("design2/header/svcore//swf/simpleviewer.swf", "box_slideshow", "998", "294", "9.0.124", false, flashvars, params);
</script>
see www.delosgaia.nl