How to link to a ShadowBox from external URL?

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

How to link to a ShadowBox from external URL?

Sunaj
Any best practice? Any already developed solutions?

Situation is this:
I have a page with a number of shadowboxes on it.. now I need to send out email to clients that contains direct links to each of these Shadowboxes so that a) first the page loads and b) then the particular Shadowbox loads...

Something like this

http://www.myserverblabla.com/pagewithshadowboxes.php#box1
http://www.myserverblabla.com/pagewithshadowboxes.php#box2
http://www.myserverblabla.com/pagewithshadowboxes.php#box3

Thanks for any and all help with this one! :)
Reply | Threaded
Open this post in threaded view
|

Re: How to link to a ShadowBox from external URL?

Wizzud
Javascript:
- on Dom Ready...
  - if URL has bookmark...
    - if bookmark equates to a Shadowboxed link...
      - activate Shadowboxed link

Easier with a library, eg jQuery.
Combine literacy with curiosity and a whole world of information opens up to you
Reply | Threaded
Open this post in threaded view
|

Re: How to link to a ShadowBox from external URL?

Sunaj
Alright, thanks Wizzud.. for other people who are trying to do this it, I think JQuery plus getUrlParam (version 2 from http://www.mathias-bank.de/2007/04/21/jquery-plugin-geturlparam-version-2/) is THE way to achieve this.
Reply | Threaded
Open this post in threaded view
|

Re: How to link to a ShadowBox from external URL?

Rics
This post was updated on .
Hi, thank you both for this tip, can you explain more?

I've html pages linked on my homepage, to be more precise, all contents of the website, in html pages, are into shadowboxes, if i click on a thumbnail link into my homepage shadowbox load the anchored html page.
When i'm linking that page on an external website, when opened you have only the linked page obviusly, not the home with the shadowbox that open the linked html page.

From what i've read, if i have understand correctly, is possible to load the link via shadowbox, also with a link through getURL when the content link is, for example, on facebook.

To be more clear:

I've this link on my homepage:

a href="content/001.html" rel="shadowbox;height=650;width=600"><img src="images/thumbs/001.jpg" alt="Page001" /

How i can have the homepage that load automatic shadowbox when the content/001.html is linked on another website or a network like facebook?


Thank you all for the support!
Reply | Threaded
Open this post in threaded view
|

Re: How to link to a ShadowBox from external URL?

Rics
I will try to be more clear:

This is the website

http://www.edpr.it/index.asp

I've the covers that are each one an "a href" link to an html page with the "rel" attribute set to shadowbox

Every cover refer to a specific html file with an Url like  http://www.edpr.it/schede/001int.html

If i put this single cover html file link in another website, when clicked it will be loaded as a single html page.

What i must do to link from another website and have the opening of http://www.edpr.it/index.asp with in automatic load in shadowbox the linked 001int.html page?

Can someone help me? Thank you!

Reply | Threaded
Open this post in threaded view
|

Re: How to link to a ShadowBox from external URL?

Rics
I've spent all the day to find a solution to my problem and i'm now at this point:

<script type="text/javascript"> var abc = location.href; // define a variable called abc from the browser URL Shadowbox.init({ // let's skip the automatic setup because we don't have any // properly configured link elements on the page skipSetup: true, // include the html player because we want to display some html content players: ["iframe"] }); window.onload = function(){ // load the content by abc variable Shadowbox.open({ content: 'abc', player: "iframe", }); }; </script>
anchors are:

<.a id="scheda065news" href="schede/065int.html?id=scheda065news" rel="shadowbox;height=470;width=980">

<.a id="scheda064news" href="schede/064int.html?id=scheda064news" rel="shadowbox;height=470;width=980">

The goal is that the Shadowbox.open content loads the var "abc" that contents the browser url get with
location.href

This to load automatically in shadowbox a page content that is linked from another website.

URL example:

hxxp://www.mysite.com/index.asp?id=scheda065news

reading the querystring "scheda065news" the entire path "schede/065int.html" must be placed into the content of shadowbox.

But i can't get it

Reply | Threaded
Open this post in threaded view
|

Re: How to link to a ShadowBox from external URL?

otheroom
I used a combination of PHP and JS to accomplish this with a site I did. Here is the basic idea:

In the page that should be in a SB window I put in some javascript to redirect it to the main page if it found that it was not in a SB window.

if (window.name != 'sb-content') window.location.href = 'index.php?sb=item12';


Then in the main page it would look for the "sb" parameter and if found, execute this:

Shadowbox.open(document.getElementById('item12'));

You will have to have id="id_name" specified for each of the possible SB links in order for this to work.


There may be a more elegant way to do this but this is what worked for me. You can see it in action by clicking on this link.
Reply | Threaded
Open this post in threaded view
|

Re: How to link to a ShadowBox from external URL?

Rics
Thanks for showing your way otheroom, tomorrow i will explain my solution.
Yes, a bit of extra work with javascript solved me the problem.
At least in part because i will refine some other remaining things.

Goodnight for GMT+1 people!!
Reply | Threaded
Open this post in threaded view
|

Re: How to link to a ShadowBox from external URL?

Rics
Sorry for the delay, here's what i did to have a shadowbox iframe content linked from another website:

JS:
<script type="text/javascript">
//init shadowbox 
Shadowbox.init({
    language: 'it',
    players:  ['img', 'html', 'iframe', 'qt', 'wmp', 'swf', 'flv']
});

//get the url and split the id string
var url = document.location.href;
var idlibro = url.split("id="); 
if(idlibro[1]!=undefined){

Shadowbox.init({
    // let's skip the automatic setup because we don't have any
    // properly configured link elements on the page
    skipSetup: true,
    // include the html player because we want to display some html content
    players: ["iframe"]
});

window.onload = function(){
	var host = "http://www.edpr.it/schede/";
	var host2 = host.concat(idlibro[1]);
	var url = host2.concat("int.html");

    	// get the url generated by concat
    	Shadowbox.open({
        	content:    url,
        	player:     "iframe",
    	});
	};
};

</script>

HTML:

<a href="schede/066int.html" rel="shadowbox"><img src="images/thumbs/066.jpg" alt="Prospettive Edizioni srl" /></a>

With this if you enter to the website directly you have the classic shadowbox, load when click over a cover, but if you click on a website that have this url

http://www.edpr.it/index.asp?id=066

the javascript will read the id and with concat it makes possible to load the page associated with the shadowboxed cover referred by the id.


The problem now is that when a shadowbox is opened from an external website with this method i've on the browser url "http://www.edpr.it/index.asp?id=065" that after closing the automatic loaded shadowbox don't appear as the main page url "http://www.edpr.it", i've tried to add
window.location.href('http://www.edpr.it')
at the onclose event into shadowbox.js but it force a reload of the main page.

Coming from an external website with this method works, but will keep the id string on the url if i don't find a way to clear the string with the "onclose" in shadowbox.js

I've also tried to have a complete "id" management for every shadowbox, to make them bookmarkable with this:

JS:
<script type="text/javascript">
function substitute(addon){
var urlset = "http://www.edpr.it/index.asp"; 
var fixurl = urlset += addon;
window.location = fixurl;
}
</script>

HTML:

<a href="schede/066int.html" rel="shadowbox" /onclick="substitute('?id=066')" ><img src="images/thumbs/066.jpg" alt="Prospettive Edizioni srl" /></a>
(onclick isn't allowed with tag a in this board, consider the slash a trick to show it, not a sintax error)


Now every time that you click on a shadowboxed cover(image) you have his unique url like

http://www.edpr.it/index.asp?id=066 for cover X

http://www.edpr.it/index.asp?id=065 for cover Y

...

http://www.edpr.it/index.asp?id=xxx for cover Z

The problem is also the same:

Page reload

With this method every time you click on a shadowbox you have an home page reload that in automatic loads the shadowbox by the string id and then, after clicking close, through the on close window.location.href('http://www.edpr.it') in the shadowbox.js used to reset the url, you another home page reload.

I don't know if is possible to obtain what i did without all these page reload with my basic skills, but the simple thing that i need at the end of all is to have unique id for each shadowboxed url so i can refer the shadowboxed content in other websites and in the same time the possibility to have each shadowbox bookmarkable so i can recall it with an auto load.

Thank you for the patience to read all, and if something isn't clear i'm here to explain it better!





Reply | Threaded
Open this post in threaded view
|

Re: How to link to a ShadowBox from external URL?

Wizzud
In reply to this post by Rics
window.onload = function(){
  var a = window.location.href.split('?')
    , b = ((a[1] || '').match(/id=sheda(\d+)/i) || [])[1] || ''
    , c = b ? a[0].split('/') : ''
    , d = b ? c.pop() : ''
    , e = b ? c.join('/') + '/shede/' + b + 'int.html' : '';
  if(e){ Shadowbox.open({content:e, player:'iframe', width:980, height:470}); }
};
Combine literacy with curiosity and a whole world of information opens up to you
Reply | Threaded
Open this post in threaded view
|

Re: How to link to a ShadowBox from external URL?

se7ensuch
In reply to this post by otheroom
other room,

any chance you can share those scripts with us (js, and php) you used?

I am looking to do something almost exactly to what you have accomplished, just load vimeo videos within the SB from an external link.
Reply | Threaded
Open this post in threaded view
|

Re: How to link to a ShadowBox from external URL?

miss.m
I need to do this as well, so that on facebook when a lightbox is shared, users who click on the link can be taken to that exact lightbox.

Would the approach on this page work with Shadowbox?
http://forums.whirlpool.net.au/archive/1121325

Any help much appreciated!
Reply | Threaded
Open this post in threaded view
|

Re: How to link to a ShadowBox from external URL?

arttronics
I looked at that thread and the final jQuery solution that would seem to work is this method:
$("a#yourAnchorIDforShadowbox" + window.location.href.split('#')[1]).click();

Then for the Shadowbox rel Attribute, you need to over-ride Automatic Player handling so Shadowbox will use the correct Shadowbox Player since it has no reference (due to no file extension on the incoming link).

Shown below are 3 fragment line examples showing how to add the correct Shadowbox Player to match the content.
     If your current href starts with a # (hash)...
     rel="shadowbox;player=inline;

     If your current href is for image.jpg
     rel"shadowbox;player=img;

     If your current href is for a HTML page.
     rel"shadowbox;player=html;

The way you can test this out is to make the required changes as explained in that thread and the info above to the page desired.

Then, make a simple HTML page with the special link to access the webpage with Shadowbox on it. If all goes well Shadowbox should fire up and showcase the content.

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.