Open Shadowbox outside an iframe

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

Open Shadowbox outside an iframe

neocorps
Hi,

  I've been searching over the internet to find a solution, there's even a "solution" in here
http://mjijackson.com/shadowbox/doc/faq.html, but i cant seem to make it work.

 This is what im doing:

in my iframe i have this code

<head>
        <title>bla bla</title>
<link href="styleframe.css" rel="stylesheet" type="text/css"/>


<script> var Shadowbox = window.parent.Shadowbox; </script>
</head>

and my links are like this



In my Parent html i have this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">

<head>
        <title>bla bla</title>

<script type="text/javascript" src="shadowbox/jquery-1.2.6.js"></script><script type="text/javascript" src="shadowbox/adapter/shadowbox-jquery.js"></script><script type="text/javascript" src="shadowbox/shadowbox.js"></script><script type="text/javascript"> Shadowbox.loadSkin('classic', 'shadowbox/skin'); Shadowbox.loadLanguage('es', 'shadowbox/lang'); Shadowbox.loadPlayer(['flv', 'html', 'iframe', 'img', 'qt', 'swf', 'wmp'], 'shadowbox/player'); window.onload = Shadowbox.init; </script>


</head>
<body>


<div>
<iframe frameborder="0" class="iframe" id="content" name="content" src="inicio.php" onLoad="calcHeight();" scrolling="auto" allowtransparency="true"></iframe>
</div>


so, the iframe called content has a webpage inside, i need to open in the parent window the items i need to display.

when i paste the  code in the page from the iframe, shadowbox works great, inside of the iframe, but great, i cant make it to work outside of the iframe.

am i missing something??.. im not very good with java script, but i've managed to make shadowbox work in other webpages.

Thanx in advance!.
Reply | Threaded
Open this post in threaded view
|

Re: Open Shadowbox outside an iframe

neocorps
Just to follow up this...

  Anyone have an answer?..

Thanx in advance
Reply | Threaded
Open this post in threaded view
|

Re: Open Shadowbox outside an iframe

neocorps
anyone????
Reply | Threaded
Open this post in threaded view
|

Re: Open Shadowbox outside an iframe

Wizzud
In reply to this post by neocorps
As far as I can tell, the links on your iframed page are like this...

< a href="link.html" rel="nofollow" target="_top">< img src="image.jpg" alt="" />< /a>

I think what you are trying to do is open link.html into the top window's Shadowbox, where the link to link.html is in an iframe (not a Shadowbox iframe) within that top window.


Include Shadowbox code in the top window as normal (not in the iframed page).

In the iframed page code :

javascript...

var sbx = window.parent.Shadowbox;
function openTopSBX(el){
  if(sbx){
    sbx.open( { content : el.href
                   , player : 'iframe'
                   , title : el.title||''
                   //could include width/height/options if desired
                   }
                );
    return false;
  }else{ //no Shadowbox in parent window!
    return true;
  }
}

html...

< a href="link.html" rel="nofollow" target="_top" onclick="return openTopSBX(this);">< img src="image.jpg" alt="" />< /a>


[Documentation : FAQ and Advanced Usage]
Combine literacy with curiosity and a whole world of information opens up to you
Reply | Threaded
Open this post in threaded view
|

Re: Open Shadowbox outside an iframe

neocorps
Wizzud, you'r a saint.

  It works as it should, thank you very much!, it was worth the wait.

  Only one question, if i want it to open different players how can i do it?.


  sbx.open( { content : el.href
                   , player : 'iframe' 'img' 'html' 'qt' 'flv'
                   , title : el.title||''
                   }

  Is this the correct way?, i really dont know much about javascripting...

anyways thank you, much apreciated!.
Reply | Threaded
Open this post in threaded view
|

Re: Open Shadowbox outside an iframe

Wizzud
Shadowbox.open( { content : el.href
                         , player : 'iframe'
                         , title : el.title||''
                         }
                       );

The above opens one media item - given by content - in the specified player, with the specified title.
If you want to open a second media item, into a different player, with a different title, then change each property of the object accordingly! ...

Shadowbox.open( { content : 'fred.swf'
                         , player : 'swf'
                         , title : 'RTFM, and learn some Javascript!'
                         }
                       );

If you want to open a gallery of media items, then supply an array of objects and add the same gallery property to each object.
Combine literacy with curiosity and a whole world of information opens up to you
Reply | Threaded
Open this post in threaded view
|

Re: Open Shadowbox outside an iframe

deco10
I've got shadowbox to lauch a single image in the parent window from the example above so thanks,

but how do i go about getting a gallery going? i know from the post above you have to set up an array of images, but how exactly is this done?

Many Thanks
Reply | Threaded
Open this post in threaded view
|

Re: Open Shadowbox outside an iframe

Wizzud
Have you investigated the 'Script-triggered Gallery' example on http://mjijackson.com/shadowbox/index.html#demos ?
Combine literacy with curiosity and a whole world of information opens up to you
Reply | Threaded
Open this post in threaded view
|

Re: Open Shadowbox outside an iframe

deco10
thanks very much, i'll give it a go
Reply | Threaded
Open this post in threaded view
|

Re: Open Shadowbox outside an iframe

deco10
whats wrong with code this? It makes the screen darker but nothing loads:

iframe

function openTopSBX(){
var sbx = window.parent.Shadowbox;
  if(sbx){
    var img1={
        player:     'img',
        content:    'images/1.jpg'
    };  
    var img2={
        player:     'img',
        content:    'images/2.jpg'
    };
    sbx.open([img1, img2], {
        continuous: true,
        slideshowDelay:3
    });
    return false;
  }else{
    return true;
  }
}

HTML

Test 
Reply | Threaded
Open this post in threaded view
|

Re: Open Shadowbox outside an iframe

neocorps
I was analizing and comparing your script from the doc/demo.js of the script triggered gallery, the only thing i could say about it is that..

 your variables that define the images, are inside the if (sbx), i have not tried it, but maybe if you take them out and leave the script like this:

function openTopSBX(){
var sbx = window.parent.Shadowbox;

var img1={
        player:     'img',
        content:    'images/1.jpg'
    };  

var img2={
        player:     'img',
        content:    'images/2.jpg'
    };

  if(sbx){
    sbx.open([img1, img2], {
        continuous: true,
        slideshowDelay:3
    });
    return false;
  }else{
    return true;
  }
}
it might work. because if the screen is dark, then it must be a problem with the player not the function calling Shadowbox. i guess.
Reply | Threaded
Open this post in threaded view
|

Re: Open Shadowbox outside an iframe

Wizzud
In reply to this post by deco10
Have you loaded the 'img' player?
Do the images exist?
Is Firebug console reporting an error?

NB
options should be expressed as such, eg...
sbx.open( [ { player:'img'
                 , content:'images/1.jpg'
                 }
              , { player:'img'
                , content:'images/2.jpg'
                }
              ]
             , { options: { continuous:true
                                  , slideshowDelay:3
                                  }
              }

            );
Combine literacy with curiosity and a whole world of information opens up to you
Reply | Threaded
Open this post in threaded view
|

Re: Open Shadowbox outside an iframe

deco10
i called this code in the parent window:

Shadowbox.loadSkin('classic','classic');
Shadowbox.loadLanguage('en', 'lang');
Shadowbox.loadPlayer(['img','html'],'player');
window.onload = function(){
    Shadowbox.init();}

firebug is saying 'unknown player undefined' - any ideas on this?
Reply | Threaded
Open this post in threaded view
|

Re: Open Shadowbox outside an iframe

HerrStirlitz
In reply to this post by Wizzud
hello dear mister.
i was searching through the forum and google, but i gues my problem is too specific.
i need similar solution the only problem is that i've got to use "longdesc" instead of "href" becouse im using it paired with imageflow - so the links seems like following
but they only work without using of "ifame" because i can't put

onclick="return openTopSBX(this);"

inside of longdesc parameter.

i'm not that good with javascript, but i hope someone can help me.
thanks in advance!
Ace
Reply | Threaded
Open this post in threaded view
|

Re: Open Shadowbox outside an iframe

Ace
In reply to this post by Wizzud
<script> var sbx = window.parent.Shadowbox; function openTopSBX(el){ if(sbx){ sbx.open( { content : el.href , player : 'iframe' , title : el.title||'' , height: 'height in px' //change your height , width: 'width in px' //change your width } ); return false; }else{ //no Shadowbox in parent window! return true; } } </script>


How would I modify the code so it fits with the jquery attributes to target all links?
Ace
Reply | Threaded
Open this post in threaded view
|

Re: Open Shadowbox outside an iframe

Ace
Sorry... didn't know this thread was html ready. That link in my previous post is the html code to set for each link manually.
Ace
Reply | Threaded
Open this post in threaded view
|

Re: Open Shadowbox outside an iframe

Ace
In reply to this post by neocorps
<script type="text/javascript" src="jquery.js"></script><script> var sbx = window.parent.Shadowbox; function openTopSBX(el){ if(sbx){ sbx.open( { content : el.href , player : 'iframe' , title : el.title||'' , height: 'height in px' //change your height , width: 'width in px' //change your width } ); return false; }else{ //no Shadowbox in parent window! return true; } } </script>
<script type="text/javascript"> $(document).ready(function() { $('a').attr( 'rel','shadowbox'); $('a').attr( 'target','_top'); $('a').bind('click', function(){return openTopSBX(this)}); </script> 
What's wrong with this code? I'm not a programmer...
Reply | Threaded
Open this post in threaded view
|

Re: Open Shadowbox outside an iframe

Wizzud
Apart from the fact the you've got height and width set to a string instead of a number, there's nothing actually wrong with it ... but then I have no idea what the rest of your iframed content actually consists of. If you have anchors that point to anything other than pages, for example, they won't work correctly (because you're forcing 'iframe' as the player).

There's also a huge assumption that Shadowbox does actually exist (and function) in the iframe's parent window!?

[ Your jQuery code : there's no need to set the rel attribute to 'shadowbox' (but there's nothing wrong with doing so); you could save some processing effort by chaining the commands (but, again, there's nothing wrong with not doing so) ]
Combine literacy with curiosity and a whole world of information opens up to you
Ace
Reply | Threaded
Open this post in threaded view
|

Re: Open Shadowbox outside an iframe

Ace
I got it all to work by tying in other codes I found.

It would have all been fine, except for the fact that my friend wanted the website to auto-update values on all links and other stuff with pre-loaded coding, since he just barely knows how to update content as is.

Thanks for the help, your coding helped a lot
Ace
Reply | Threaded
Open this post in threaded view
|

Re: Open Shadowbox outside an iframe

Ace
In reply to this post by Wizzud
Is there a way to autowrap the window around the content though? Or is it px size only?
123