Transitioning from one iframe shadowbox to another (without being grouped)

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

Transitioning from one iframe shadowbox to another (without being grouped)

logicali
First off, thanks so much for such an excellent script!  I've tried so many different multi-format lightbox solutions and this is, by far, my favorite.

But I'm having a problem figuring out how to transition from one iframe shadowbox to another iframe shadowbox that aren't grouped into a set.  I've scoured the posts here and, although I've found a lot of people with a similar question, there were few with responses that had a solution.  I've included the specific info below, with links to other post solutions I've tried.

Scenario:

1. Shadowbox opens with Member Login Page (member_login.php)
2. Next to the login button, there is a 'Request Access' link (member_request.php) that I'd like to transition to a new shadowbox.  There is no 'Request Access' link on the parent page, so I don't think I can use 'grouping' to use the next/previous triggers for this link.

Example Implementation: (currently using code from 'TRY #1' below)

http://www.vedacreation.com/sandbox/

I had it semi-working by opening a 2nd shadowbox on top of the first by embedding the full Shadowbox code into the source of the login page, but I'd like the original shadowbox (member_login.php) to transition into the 2nd shadowbox (member_request.php) instead of having two open at once.  Also, the second shadowbox resizes to fit the contents of Shadowbox #1, which is too small.


Solutions I've tried:

(Note: the links below are only showing the inner code for the opening anchor tag, as the forum preview kept showing it as converted html, so I left the rest off)


TRY #1
=======



HEADER IN FIRST SHADOWBOX IFRAME (member_login.php)

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

LINK IN PAGE 1 IN SHADOWBOX:

a href="member_request.php" rel="shadowbox;height=620;width=440"

RESULT:

Shadowbox goes to my 'Request Access' page, but doesn't resize the shadowbox to the values provided in the link.


TRY #2:
========


HEADER IN FIRST SHADOWBOX IFRAME (member_login.php)

<script> var Shadowbox = window.parent.Shadowbox; function closeBox() { Shadowbox.close(); Shadowbox.open({ content: 'member_request.php', player: "iframe", title: "", height: 620, width: 440 }); } </script>
LINK IN PAGE 1 SHADOWBOX:

a href="#" onclick="closeBox()"

RESULT:

First shadowbox closes and overlay flashes but the new shadowbox fails to open.  I also tried this same method but with the 'var Shadowbox = window.parent.Shadowbox' replaced with the full Shadowbox code

TRY #3:
=======


HEADER IN FIRST SHADOWBOX IFRAME (member_login.php)

<link rel="stylesheet" type="text/css" href="js/shadowbox-3.0.3/shadowbox.css">
<script type="text/javascript" src="js/shadowbox-3.0.3/shadowbox.js"></script><script type="text/javascript"> Shadowbox.init(); </script>
LINK IN PAGE 1 SHADOWBOX:

a href="member_request.php" rel="shadowbox;height=620;width=440"

RESULT:

Opens a new shadowbox, but sized very small and leaves the original open.  I thought I saw an option that prevents resizing the 2nd shadowbox (?), but I'm trying to avoid having the original shadowbox remain open.  Instead, I'm trying to get Shadowbox Page 1  to transition into Shadowbox Page 2 ..... or, close shadowbox page 1 and immediately open shadowbox page 2.

--------

I'd be so grateful for any help you can provide.  My apologies in advance if this is really simple or has been answered already.  I can usually figure things out with an example to go by - but athough I found a lot of info in this forum for opening a second shadowbox on top the first or linking from within a shadowbox to a new page in the parent window - I  couldn't find anything about switching between shadowboxes that aren't grouped in a set from the parent page.

Thanks!


Reply | Threaded
Open this post in threaded view
|

Re: Transitioning from one iframe shadowbox to another (without being grouped)

HenzeBerkheij
what you can do is go the javascript way, as explained on the bottom of the support page. print the html from the member_request.php page in an html player ( be sure you remove the \r and \n using str_replace, and be sure you only use doublequotes when you use singlequotes in your javascript).

then use ajax to retrieve the contents for that other page and put that in the content variable of the current object like this:

Shadowbox.gallery[Shadowbox.current].content = retrievedContent;
Shadowbox.gallery[Shadowbox.current].height = yourHeight;
Shadowbox.gallery[Shadowbox.current].width = yourWidth;

Shadowbox.change(Shadowbox.current);

what it does is update the current value and then change the viewer to show the new value!
Reply | Threaded
Open this post in threaded view
|

Re: Transitioning from one iframe shadowbox to another (without being grouped)

logicali
In reply to this post by logicali
Thanks so much for the follow-up!  I was hoping the solution would be a bit more simple, but I still really appreciate the info.  I'm  a little intimidated by ajax and didn't see an example of it from the support page (http://shadowbox-js.com/support.html ?), but I'm probably looking in the wrong spot.

I had previously been using Mediabox for my lightbox solution, and to do what I described above - all I had to do was add an onclick event to my 'Request Access' link that called the script from the parent page.  The code used was:  onclick="parent.Mediabox.open('samplepage.php','420 620');" - which allowed me to transition from one external page to the next (while smoothly maintaintaining the lightbox effect).  

Anyways, I was crossing my fingers that I could do something similar in Shadowbox - but it appears this isn't the case.

I've temporarily worked around the problem by grouping the pages together using a Shadowbox gallery set and just hiding the 'Request Membership' link on the parent page in a hidden div.  This gives me access within the shadowbox to the onclick="Shadowbox.next()" trigger, but without having to actually display a link to that page on the parent page.  It isn't as elegant as I was hoping for in terms of expanding the functionality to other areas of the site, but it works:  http://www.vedacreation.com/sandbox/

Reply | Threaded
Open this post in threaded view
|

Re: Transitioning from one iframe shadowbox to another (without being grouped)

HenzeBerkheij
maybe you can try the same solution but without ajax, player = iframe..and just replace the content with the new url and set the dimensions (height, width) and then do the change function...

makes it a lot easier because taking away ajax.
Reply | Threaded
Open this post in threaded view
|

Re: Transitioning from one iframe shadowbox to another (without being grouped)

Infario
yes..it worked

i made this working finally. I am posting here may be helpful for other people searching this

add this on the first iframe page

  function openSB(path,width,height){
var Shadowbox = window.parent.Shadowbox;
Shadowbox.gallery[Shadowbox.current].content = path;
Shadowbox.gallery[Shadowbox.current].width = width;
Shadowbox.gallery[Shadowbox.current].height = height;
Shadowbox.change(Shadowbox.current);
}

then link the next iframe page like this.

<a href="javascript:openSB('popup/user/login','350','300');" >Login here

thatsit!. it will resize and load content smoothly. May you can pass 'player' parameter if you wish
Reply | Threaded
Open this post in threaded view
|

Re: Transitioning from one iframe shadowbox to another (without being grouped)

arttronics
Thanks for posting a brilliant method to move from one Shadowbox iframe Player to the next Shadowbox iframe Player while using Shadowbox Gallery as the foundation.

Your markup also illustrates a great working example of Shadowbox.change that I have not seen executed so well.


For those seeking to do the same but without the Shadowbox Gallery attribute, I've posted a method that shows how to do just that.

Project files and more info for "Shadowbox to Shadowbox Transition DEMO" after the jump.

When posting your markup here on the forum follow these simple steps:

0. Login and paste your markup into the Message Box.
1. Mouse select the markup you just pasted.
2. Press the More Button from the Message Box Toolbar.
3. Select Raw text from the drop down menu. DONE!

If I don't respond to your POST, it's your inability to provide your markup correctly.

Check out a few DEMOS I made that are here in this forum.

Reply | Threaded
Open this post in threaded view
|

Re: Transitioning from one iframe shadowbox to another (without being grouped)

Sabotage
In reply to this post by HenzeBerkheij
Thank you for sharing!!! I was going crazy trying to smooth transition... now it is working for me!!!