Forum user: efet

Gallery plugin that could be used with overlay counts total number of images and prints the image number viewed. Is there a way to make it work with the slideshow plugin?

I load the pane contents from external pages. But I cant figure out how to link a tab within another tab.

i.e.

tab 1 page1.htm
how do I place a link here that will open the third tab???
tab 2 page2.htm
tab 3 page.htm

I am using overlay plugin with gallery plugin. How do I change opacity value of prev,next,info div backgrounds?

<!-- panes -->
<div id="flowpanes">

    <!-- wrapper for scrollable items -->

    <div class="items">

        <div>
            <a href="?Section=products&SubSection=products&CATEGORYID=2"><img src="/html/media/images/7C9J3LO.jpg" /></a>
        </div>

        <div>
            <a href="?Section=products&SubSection=products&CATEGORYID=2"><img src="/html/media/images/7C9J3LO.jpg" /></a>
        </div>

    </div>

</div>

<div class="prevnext">
    <div class="bgprev">
        <a href="#" alt="Previous" class="prev"/>
    </div>  
    <div class="bgnext">
        <a href="#" alt="Next" class="next"/>
    </div>
</div>

<!-- activate tabs with JavaScript -->
<script>

// wait until document is fully scriptable
$(document).ready(function() {

    // select #flowplanes and make it scrollable. use circular and navigator plugins
    $("#flowpanes").scrollable({size: 1}).circular().mousewheel(400).navigator({

        // select #flowtabs to be used as navigator
        navi: "#flowtabs",

        // select A tags inside the navigator to work as items (not direct children)
        naviItem: 'a',

        // assign "current" class name for the active A tag inside navigator
        activeClass: 'current'

    });
});
</script>

<style>
/* everything is constructed with a single background image */

/* root element for tabs */
#flowtabs {

    /* dimensions */
    width:760px;
    height:31px !important;
    margin:0 !important; 
    padding:0;  

    /* IE6 specific branch (prefixed with "_") */
    _margin-bottom:-2px;
}

/* single tab */
#flowtabs li { 
    float:left; 
    margin:0; 
    padding:0; 
    text-indent:0; 
    list-style-type:none;
}

/* a- tag inside single tab */
#flowtabs li a {
    display:block;
    height: 31px;   
    width: 189px;   
    padding:0px;
    margin:0px;

    /* font decoration */
    color:#000;
    font-size:12px;
    line-height:33px;
    text-align:center;
    text-decoration:none;
}

/* adjust the background image position on each tab */
#flowtabs #t1           { background-position: 0 0; }
#flowtabs #t2           { background-position: -189px 0; }
#flowtabs #t3           { background-position: -378px 0; }
#flowtabs #t4           { background-position: -567px 0; width:192px;}

/* mouseover state */
#flowtabs a:hover       { color:#fff;    }
#flowtabs #t1:hover     { background-position:      0 -33px; }
#flowtabs #t2:hover     { background-position: -189px -33px; }
#flowtabs #t3:hover     { background-position: -378px -33px; }
#flowtabs #t4:hover     { background-position: -567px -33px; }

/* currently selected tabs */
#flowtabs a.current     { cursor:default; color:#fff; line-height:34px; }
#flowtabs #t1.current { background-position:      0 -66px; }
#flowtabs #t2.current { background-position: -189px -66px; }
#flowtabs #t3.current { background-position: -378px -66px; }
#flowtabs #t4.current { background-position: -567px -66px; }

/* panes */
#flowpanes {
    width:100%;
    height:350px;   
}

/* single pane */
#flowpanes div {
    display:none;   
}

#flowpanes div img {
    border: 0;      
}

/* override the root element to enable scrolling */
#flowpanes {
    position:relative;
    overflow:hidden;
    clear:both;
}

/* override single pane */
#flowpanes div {
    float:left;
    display:block;
}

/* our additional wrapper element for the items */
#flowpanes .items {
    width:20000em;
    position:absolute;
    clear:both;
    margin:0;
    padding:0;
}
.prevnext { width:100%; height:40px; top:250px; position:absolute; z-index:100; }
.prevnext .bgprev { float:left; width:80px; height:50px; background:transparent url(http://www.pangeaadvisors.org/IDC/images/trans_black_50_bg.png) repeat scroll 0 0; }
.prevnext .bgnext { float:right; width:80px; height:50px; background:transparent url(http://www.pangeaadvisors.org/IDC/images/trans_black_50_bg.png) repeat scroll 0 0; }
.prevnext a { float:left; height:26px; width:26px;display:block; }
.prevnext a.prev { float:left; width:80px; height:50px; background:url(http://www.pangeaadvisors.org/IDC/images/btn_left.png) bottom; }
.prevnext a.next { float:right; width:80px; height:50px; background:url(http://www.pangeaadvisors.org/IDC/images/btn_right.png) bottom; }
.prevnext a.prev:hover, a.next:hover { background-position:top; }

</style>

Hi,

I tried doing it myself with the following code but both previous/next images duplicated. Is there a way to fix that?

Hi,

I am trying to use this plugin in Store Snapshot section of my website. I did not change default settings, copy/pasted demos. However, for some reason overlay div is not positioned inside the background but way below. I am open for any suggestions.

I tried using overlay feature inside tabs but overlay does not properly work (only works in first one) as it inherits tab styles. I tried overriding it but failed.

http://pangeaadvisors.org/projects.asp

cyberlussi, can you please post a demo link. I think I am having similar issue here with 2008 and 2007 project links.

http://pangeaadvisors.org/projects.asp

Here is the link:
http://pangeaadvisors.org/projects.asp

2009 Projects position in the center as I want them to be. But check out 2007 projects. When clicked, overlay in right side and without the background.

Can someone tell me why tooltip tool is not functioning inside the timetable area.

When one hovers on "My name is Earl" link, it needs to be appearing.

http://pangeaadvisors.org/sep123/

But then it means if you place scrollers next to each other than there is no way to leave a little bit of a space on the left.

http://www.refinethetaste.com/html/

Hi,

I was wondering if I could make overlay plugin work in forms. Obviously, I could not make it work. But I have a test links this time. Very first two "test me" links in the white area. Link outside form tags is working, link inside is not working.

http://refinethetaste.com/html/cp/?Section=orders&Process=AddOrder

To make my question simpler; how can I use div inside div in formpanes div?

I understand that the problem occurs because I set my panes as;

<div>
<div>
</div>
</div>

$(".formtabs").tabs(".formpanes > div");
Removes the display: none; on the first div but second div is still display:none. If I change it as .formpanes > div > div than first div is not displayed... People of the universe, advise me something here, I really need it as

<div class="formpanes">
<div>
<div class="row">
<label for="EmailAddress">Email Address</label> <input type="text" name="EmailAddress" value="" class="width60" />
</div>
<div class="row">
<label for="Password">Password</label> <input type="text" name="Password" value="" class="width60" />
</div>
</div>
</div>