Is it possible to open a link in another shadowbox from within a shadowbox

classic Classic list List threaded Threaded
10 messages Options
Reply | Threaded
Open this post in threaded view
|

Is it possible to open a link in another shadowbox from within a shadowbox

Steve (Tai's dad)
Hi there,

First of all, this effects library is awesome!

I have a page at at

http://www.labtestsonline.org/understanding/analytes/cardiac_biomarkers/glance-3.html

The table contains a link in the upper right corner to expand the table.  Clicking on the link will cause a shadowbox to appear (in iframe player mode) that displays the identical table with an expanded width so the data is not so crunched together and easier to read.  Inside this shadowbox table, there is a link labeled 'Enzyme' under the 'What it is' column.  We are hoping that clicking on the 'Enzyme' link would also launch another shadowbox, but it is not working.  (NOTE:  If you click on this 'Enzyme' link in the original table,  ie, the non-shadow box table, it will display in a shadowbox).

Thanks in advance for any tips!

Steve
Reply | Threaded
Open this post in threaded view
|

Re: Is it possible to open a link in another shadowbox from within a shadowbox

Wizzud
This might get complicated...

You're actually opening the table in html player (inline html), not the iframe player.
As such, the table presented in Shadowbox is a copy of the page's original table.
Because it's a copy, the events associated with the original table's a.popup-note elements are not present on the copy.
Hence, when clicking Enzyme on the Shadowboxed table, it navigates to a new page following its natural link.

To get the a.popup-note elements to work on both the original table and the Shadowboxed copy, you can either:
- change their Shadowbox activation to an onclick that runs a function that opens them in a Shadowbox, or
- attach a jQuery 'live' event to a.popup-note elements and get that to activate the link in Shadowbox

Personally, I would go for the latter (in place of setting up the rel attribute), eg...
    $('a.popup-note').live( 'click', function(){
        var J = $(this);
        Shadowbox.open({
            el: this
          , title: J.attr('title')||''
          , player: 'iframe',
          , options: {}
          , content: J.attr('href')
          , width: 500
          , height: 450
          });
    });
Theoretical!

However, one thing to bear in mind here:
Let's say you have the table open in Shadowbox, and you click on Enzyme.
The Enzyme page will replace the table as a Shadowbox.
The big question now is ... How do you get back to the 'table in Shadowbox' view when you close down the 'Enzyme in Shadowbox'?
Do you need some sort of selective onClose function for the Enzyme Shadowbox closure, that re-opens the table into Shadowbox, but only if that was where the Enzyme page was originally activated from?
Follow?
Combine literacy with curiosity and a whole world of information opens up to you
Reply | Threaded
Open this post in threaded view
|

Re: Is it possible to open a link in another shadowbox from within a shadowbox

Steve (Tai's dad)
Hi Wizzud,

Thanks so much for the reply.

Please refer to the staging server url where I put the test code:
http://stage.labtestsonline.org/understanding/analytes/cardiac_biomarkers/glance-3.html

I tried a couple of things but could not get this to work.  In /scripts/js/global_ready.js on the staging server

1. on lines 68 and 69,  I added a string variable, popup_js, defining the javacript to be included in the cloned table's HTML.  Line 68 is the version from the Shadowbox forum below; line 69 is the same code that sets up the Shadowbox earlier in global_ready.js.

    var popup_js = "<script language='javascript' type='text/javascript'>\$('a.popup-note').live( 'click', function() { var J = $(this); Shadowbox.open({ el: this, title: J.attr('title')||'', player: 'iframe', options: {}, content: J.attr('href'), width: 500, height: 450 }); });</script>";
    //var popup_js = "<script language='javascript' type='text/javascript'>\$('a.popup-note').each( function() { \$(this).attr('rel', 'shadowbox;player=iframe;width=500;height=450'); }); Shadowbox.init();</script>";

2. on line 91, I prepend this popup_js variable to the zoomwindow array

When I load

http://www.labtestsonline.org/understanding/analytes/cardiac_biomarkers/glance-3.html

and click on the 'enzyme' link, the page loads up out of the Shadowbox as before.

I checked the Shadowbox'd table's DOM in Firebug and do see the javascript, but it doesn't get called.

Am I doing something wrong here?  If so, can you please point me to where I should try your code?

thanks!
Steve
Reply | Threaded
Open this post in threaded view
|

Re: Is it possible to open a link in another shadowbox from within a shadowbox

Wizzud
I hadn't noticed popup_js but that wasn't where I meant.

This is roughly how I would do it, and bear in mind it's completely untested!

global_ready.js:
jQuery(document).ready(function($){

    /*
     * main menu select boxes
     */
    $("form.main_nav select#tests").change( function() {
        $("form.main_nav select#tests option:selected").each(function () {
            document.location = $(this).val();
        });
    });

    $("form.main_nav select#conditions_diseases").change( function() {
        $("form.main_nav select#conditions_diseases option:selected").each(function () {
            document.location = $(this).val();
        });
    });

    $("form.main_nav select#screening").change( function() {
        $("form.main_nav select#screening option:selected").each(function () {
            document.location = $(this).val();
        });
    });

    /*
     * lightbox (shadowbox)
     */
    Shadowbox.init();

    // Useful outerHTML function to get HTML of whole element, not just innerHTML, like html() in jQuery
    jQuery.fn.outerHTML = function() {
        return $('<div>').append( this.eq(0).clone() ).html();
    };

    // TABLES and ZOOMER

    // set up the zomtablem and click and add the zoomer
    var zoomcount = 0;
    var zoomtitle = new Array();
    var zoomwindow = new Array();

    // common across all tables...
    var zoomclose = "<a class='table-toggle' href='#' rel="unzoom">Minimize Table / Close</a>";
    var zoomfooter = "<p class='zoomed-footer'>&copy;  2001 - 2009 by American Association for Clinical Chemistry</p>";

    $('table.zoomable').each( function() {

        $(this).attr('rel', zoomcount);

        // 1. define the zoomer and default zoomheader
        var zoomer = "<a class='table-toggle' href='#' rel='" + zoomcount + "'>Expand Table</a>";
        var zoomheader = "<h3 class='table-headline'>Table</h3>";

        // 2. each table needs a headline (to hold zoomer/zoomclose) so find or create one
        var zoomH3 = $(this).prev('.table-headline').prepend(zoomer);
        if( !zoomH3.length ){
            // haven't got one so create one
            zoomH3 = $(this).before(zoomheader).prev('.table-headline');
        }
        // store the title now, before zoomer is added
        zoomtitle[zoomcount] = zoomH3.html();
        
        // 3. need 2 versions of headline : one for zoomer, one for zoomclose (as html)
        // clone the headline, add the zoomclose, and get the html
        zoomheader = $('<div>').append( zoomH3.clone().prepend(zoomclose) ).html();
        // now add the zoomer to headline
        zoomH3.prepend(zoomer);

        // 4. get the table's html (outerHTML)
        var zoomtable = $(this).outerHTML();

        // 5. store header, table and footer as html (title already set) and increment zoomcount
        zoomwindow[zoomcount++] = "<div class='zoomed-table'>" + zoomheader + zoomtable + zoomfooter +"<" + "/div>";

    });

    // add 'live' click handlers for the zoomer/zoomclose
    $('a.table-toggle').live( 'click', function(){
        var localcount = $(this).attr('rel');
        if(localcount == 'unzoom'){
            Shadowbox.close();
        }
        else{
            Shadowbox.open({
                player:     'html',
                title:      zoomtitle[localcount],
                content:    zoomwindow[localcount],
                width:      2000,                    //arbitrary large number
                height:     2000,                    //arbitrary large number
                options:    {viewportPadding:40}     //default is 20
            });
        }
        return false;
    });
    // add 'live' click handlers for the popup notes
    $('a.popup-note').live( 'click', function(){
        var J = $(this);
        Shadowbox.open({
            el: this
          , title: J.attr('title')||''
          , player: 'iframe',
          , options: {}
          , content: J.attr('href')
          , width: 500
          , height: 450
          });
        return false;
    });

});

/*
 * override the optionsdisplay() function
 */

function optionsdisplay(url) {
    Shadowbox.open({
        content:    url,
        player:     "iframe",
        height:     450,
        width:      500
    });
}
Combine literacy with curiosity and a whole world of information opens up to you
Reply | Threaded
Open this post in threaded view
|

Re: Is it possible to open a link in another shadowbox from within a shadowbox

Steve (Tai's dad)
Hi Wizzud,

You certainly live up to your namesake! ;-)

I finally got it to work with some minor changes.

Getting back to a point on your original reply, is it possible that when the 'enzyme' (nested) Shadowbox is closed, the zoomed table Shadowbox remains open?  Currently, when the nested Shadowbox is closed, the zoomed table closes also.

http://www.labtestsonline.org/understanding/analytes/cardiac_biomarkers/glance-3.html

thanks again for your wonderful insights!
Steve
Reply | Threaded
Open this post in threaded view
|

Re: Is it possible to open a link in another shadowbox from within a shadowbox

Wizzud
Site doesn't appear to have changed?

Strictly speaking, remain open, No. Re-open, possibly.

When Enzyme is activated from the zoomed table, the zoomed table is replaced by Enzyme. Overlaying Shadowboxes one on top of the other (within the same document) is not possible.
So, the only approach is to 'know' when Enzyme has been activated from a zoomed table, and, instead of closing it (Enzyme), re-open the zoomed table that activated it!
Simple!

No, not really.
You'd need some kind of stack to keep track of what opened what.
You'd either have to intercept Shadowbox.close() calls (from Enzyme, for example) or change enzyme.html (and all similar) to call something other than parent.Shadowbox.close() - a custom function to either re-open the original activator, or close Shadowbox.
Combine literacy with curiosity and a whole world of information opens up to you
Reply | Threaded
Open this post in threaded view
|

Re: Is it possible to open a link in another shadowbox from within a shadowbox

Kyuumeitai
Hi there, folks,

First of all, thanks for your input, it was very useful. Just want to share a solution made with an adaptation of what you guys wrote.

$('.registrate-btn').live( 'click', function(){
        var J = $(this);
//Since my last call was an iframe, I used "parent" to resize it.
        parent.Shadowbox.open({
//Changed "el" with "content", and adding the href property.
                content: J.attr('href'),
                title: J.attr('title'),
//Sizes that I needed in particular, can be changed with a custom rel property or whathever.
                height: 315,
                width: 620,
                player: 'iframe',
                options: {}
                });
        });

I hope that this becomes useful for someone out there.
Reply | Threaded
Open this post in threaded view
|

Re: Is it possible to open a link in another shadowbox from within a shadowbox

Mattia
Hi guys, first of all thank you very much for sharing your solutions. I implemented shadowbox v.3 in my site.
I'm not a javascript coder but following your suggestions I managed adding a link by shadowbox title and to make it open a new shadowbox.
I wrote these lines in my code:

<head>       
[...]
        <script type="text/javascript"> $('.info-button').live( 'click', function(){ var J = $(this); parent.Shadowbox.open({ el: this, title: J.attr('title')||'', player: 'iframe', options: {}, content: J.attr('href'), width: 705, height: 470 }); }); </script></head>

<body>
 [...]
        <div class="boxgrid captionfull">
                 Art. 1739/L 
                <div class="cover boxcaption">
                        <p>Art. 1739/L</p>
                        <p><a rel="shadowbox[dormeuse];title=<a class='info-button' rel='shadowbox' href='/photos/schede/1739_L.jpg' target='_blank'>+ info;options={continuous:true,animSequence:'sync'}" href="/photos/fc/1739_L.jpg">Foto</p>
                </div>               
        </div>
</body>

View it in action at this link: http://www.bakokkogroup.it/freecomplements/dormeuse.php
click on first photo (red dormeuse) --> "foto" --> "+ info"

To test the solution I make the link "+ info" opening in a new page ('target=_blank'), but if I delete it something seem going wrong: as soon as shadowbox try to start, it is replaced with the normal view.

Someone help me please! Thanks in advance!
Reply | Threaded
Open this post in threaded view
|

Re: Is it possible to open a link in another shadowbox from within a shadowbox

Mattia
This post was updated on .
Is there anybody out there? =(
Please Michael, help me!
Reply | Threaded
Open this post in threaded view
|

Re: Is it possible to open a link in another shadowbox from within a shadowbox

DgAPc
I can say probly not possible in 3.0.3 version.  window.parent.shadowbox does not work.  I recommend going to a older version.  I gave up with it and just use a older version.  There is some bug in this update because in 3.0b its fine.