Topic: Embed SimpleViewer gallery v2.1.3 in a jquery tab

Hello, I am using SimpleViewer version 2.1.3 to embed my gallery in a jQuery tab.  I have searched the forum and found only one entry that was relative. It was posted 12/03/2010 by Jeskey; the user was using a Pro version prior to 2.1.1

I have tried the suggestions posted in Jeskey's inquiry with regards to using $.noConflict(); and jQuery.noConflict(); but all it does is make my tabs malfunction. However, the gallery does show up when I use either version of noConflict, where as it does not show at all without it.

I have tried using the noConflict method with both my tab script and with the gallery embed code.  I am curious to know if this is something that has not been resolved in the 2.1.x version, and if I should upgrade to the new 2.2 version.  I also want to know if you can only embed SimpleViewer in a jQuery tab if you use the Pro version.

My jQuery tab script is a follows:

<script src="../js/jquery-1.5.2.js" type="text/javascript"></script>
<script type="text/javascript">
    $.noConflict();
    $(document).ready(function(){
    $('#tabs div').hide();
    $('#tabs div:first').show();
    $('#tabs ul li:first').addClass('active');
    $('#tabs ul li a').click(function(){
    $('#tabs ul li').removeClass('active');
    $(this).parent().addClass('active');
    var currentTab = $(this).attr('href');
    $('#tabs div').hide();
    $(currentTab).show();
    return false;
    });
});
</script>

My gallery embed code:

<div id="tab-4" style="height:100%;width:1160px">        
            <script type="text/javascript" src="svcore/js/simpleviewer.js"></script>
            <script type="text/javascript">
            $.noConflict();
            simpleviewer.ready(function () {
            simpleviewer.load("sv-container", "1150", "600", "000000", true);
            });
            </script>
            <div id="sv-container"></div>
      </div>

Thank you for your help.

Re: Embed SimpleViewer gallery v2.1.3 in a jquery tab

I am curious to know if this is something that has not been resolved in the 2.1.x version, and if I should upgrade to the new 2.2 version.

Compatibility with different jQuery versions was fixed in v2.1.3 and there should be less likelihood of a conflict with another instance of jQuery.
Please see the SimpleViewer Version History for a list of changes: http://simpleviewer.net/simpleviewer/history.html
Please try upgrading to SimpleViewer-Standard v2.2.0 which can be donwloaded from the link on this page: http://simpleviewer.net/simpleviewer/

I also want to know if you can only embed SimpleViewer in a jQuery tab if you use the Pro version.

With regard to embedding a SimpleViewer gallery in a jQuery tab, SimpleViewer-Standard (the free version) and SimpleViewer-Standard should behave exactly the same.

Steven Speirs
SimpleViewer Support Team.

Re: Embed SimpleViewer gallery v2.1.3 in a jquery tab

Mr. Speirs,

Thank you for your reply.  I took your advice and viewed the version history list and upgraded to v2.2.0. Unfortunately my gallery still does not show up on my webpage unless I place the "jQuery.noConflict" in my script, and with that comes malfunctioning tabs. 

So I removed the "noConflict" script and checked my page using Firebug. When I removed the "display:none" style in the default div "sv-container" and also removed it in the div "svcp-0-sv-mobile-flash" the gallery showed up in my tab and the tabs still functioned. However, this is not something that I can remove outside of Firebug, so my webpage went back to display:none.

I don't understand why the gallery shows up when the "display:none" style and the "no.Conflict" script is engaged, but doesn't when the "no.Conflict" script is removed.

I don't suppose you have anymore suggestions?  I really like SimpleViewer and will be very disappointed if I have to use a different gallery script.

On a side note, I successfully embedded the SimpleViewer gallery into Fancybox and if functions beautifully. No JQuery Conflicts.  The only difference is that Fancybox requires a "href" path to the specific URL of the gallery instead of an embedding code.

Re: Embed SimpleViewer gallery v2.1.3 in a jquery tab

With both jQuery Tabs and Fancybox, you could use an <iframe> (rather than the embedding code) with the 'src' attribute of the <iframe> pointing towards the 'index.html' page within the gallery folder. There should be no conflicts as the embedding code will be on a different page (the gallery's 'index.html' page) to the page containing your jQuery Tabs.
This method of embedding is documented in 2) Using an iFrame here: http://simpleviewer.net/simpleviewer/su … l#external

Steven Speirs
SimpleViewer Support Team.

Re: Embed SimpleViewer gallery v2.1.3 in a jquery tab

Thank you again Mr. Speirs for your reply.

I used an iFrame in lieu of the embed code, but unfortunately the gallery does not show.  But on the bright side the tabs are functioning. I checked my page in firebug again and got an error message with regards to the SimpleViewer script (which I have not touched).  The error message was this:

x.defaultView.getComputedStyle(a, null) is null [posted in red]

referencing line 9 of the simpleviewer.js file, which incidentally is the entire script so I have no idea what firebug is targeting exactly.

Perhaps you can shed some light?

Re: Embed SimpleViewer gallery v2.1.3 in a jquery tab

I used an iFrame in lieu of the embed code, but unfortunately the gallery does not show.

Try opening the gallery's 'index.html' file directly in a browser. Does the gallery display OK?
If so, then try creating a blank page with only the <iframe> code loading the gallery's 'index.html' page. Does the gallery display OK now?
I have not seen the error message you posted and it will be very difficult to decipher as the JavaScript file is packed.
Please post the URL to your web site so that we can take a look.

Steven Speirs
SimpleViewer Support Team.

Re: Embed SimpleViewer gallery v2.1.3 in a jquery tab

I created a new page with only the iframe code and it worked. When the iframe code is in my original page firebug shows the "ghost", for lack a better word, of the gallery in blue when the mouse is placed over the code. It is hard to explain. It's like it's there but it's not showing. I found the error when I clicked on the Console tab in firebug. I hope that the problem is not my css setting for the tab that houses the gallery.  Tab-4 is set to 1160px wide and 100% height. The gallery is set to 1150px wide 600px height.

http://www.acresllc.net/listings/SampleGalleryPage.html


Thank you for you patience and help.

Re: Embed SimpleViewer gallery v2.1.3 in a jquery tab

Thank you for posting the link.
Your gallery displays OK in Safari 5.1.1, IE9 and Chrome 16 on my PC but not in Firefox.
Please see this FAQ for details: http://simpleviewer.net/simpleviewer/su … ml#embed_7

Also, if embedding a SimpleViewer gallery into an <iframe>, you can set the dimensions of the <iframe> as you have done but set the gallery's own dimensions (in the simpleviewer.load() line in the embedding code) to 100% x 100% so that it completely fills the <iframe> no matter what its dimensions.

Steven Speirs
SimpleViewer Support Team.

Re: Embed SimpleViewer gallery v2.1.3 in a jquery tab

Thank you Mr. Speirs,

I already read everything on the FAQ page before consulting this forum.  I had my body/html tags and the div that holds the gallery set a 100% height.  I did change the gallery's dimension back to 100% but that did not change my luck with regards to it showing up in Firefox. 

Thank you for you help, I will not trouble you any further.

Natalie

Re: Embed SimpleViewer gallery v2.1.3 in a jquery tab

Thank you for you help, I will not trouble you any further.

It is no trouble. I'll help if I can.
I notice you have removed you sample gallery.
If you continue to experience difficulties, by all means, upload your latest test gallery and I can take another look.

Steven Speirs
SimpleViewer Support Team.

Re: Embed SimpleViewer gallery v2.1.3 in a jquery tab

Thanks,

I really want this gallery to show up in Firefox since it is such a popular browser.  I honestly don't know what else you can do for me.  I followed all of your suggestions and directions on the faq page.  I am so stumped.  Oh, I moved the gallery to a different folder which is why you could not access it again.  Perhaps you would be willing to give it one last look just in case a missed something. 

http://www.acresllc.net/listings/PS1230 … yPage.html

Re: Embed SimpleViewer gallery v2.1.3 in a jquery tab

One thing I have not yet mentioned is that you could try validating your page with the W3C Markup Validation service and fix any errors found. Inconsistencies in web pages when viewed in different browsers can often be attributed to HTML errors on the page.

Steven Speirs
SimpleViewer Support Team.

Re: Embed SimpleViewer gallery v2.1.3 in a jquery tab

No errors with regards to the iframe according to W3C Markup Validation.

But....

New development Mr. Speirs!  So I opened the page and true to form the gallery was not there, but after right clicking the area where the gallery is supposed to be located and selecting the category "This frame" and then selecting "reload frame" the frame appeared!  However, after refreshing the entire site the gallery disappeared again.  It seems that in order to view the gallery in firefox one has to reload the individual iframe.

Thoughts?

Re: Embed SimpleViewer gallery v2.1.3 in a jquery tab

I found this article regarding 'jQuery Tabs + iFrame’s' which might help: http://dean.resplace.net/blog/2011/08/j … s-iframes/

Steven Speirs
SimpleViewer Support Team.

Re: Embed SimpleViewer gallery v2.1.3 in a jquery tab

Mr. Speirs,

Thank you for your continued help. The article unfortunately did not help me, but I found a post on Stack Overflow http://stackoverflow.com/questions/1041 … ab-madness that exactly described by problem.  Oddly an iframe shows up when it is placed in the first jQuery tab in Firefox; otherwise one has to refresh the iframe if it is placed an any subsequent tabs.

Anyway I have chosen to but the gallery in the first tab.  All is well.  Thank you again for your help.

Natalie

Re: Embed SimpleViewer gallery v2.1.3 in a jquery tab

I'm glad you have found a workaround for your problem. Thank you for posting back to let us know.

Steven Speirs
SimpleViewer Support Team.