Open RSS feed items in overlay (eg.Lightbox)

[Guillaumeb]

Hello,

i have been playing with SimplePie via this script (http://www.dynamicdrive.com/dynamicindex18/rssdisplaybox/index.htm) shared over here at DynamicDrive.

After tweaking the whole thing and styling it I came up with this website (http://guillaumeb.com/newscenter/) which is my personal magazine.

Now the problem is : clicking on a feed link will direct me to their website. i'm looking for a way to better integrate the original article within my website either by :
- Automatically generating a dynamic page and retrieve the rest of the truncated text. (Not sure if this is possible without deep control of the feed)
OR
- Opening the page of the original article on a new layer (like you can open a picture on top of your webpage with lighbox).

Of course i did try to simply open links in a new tab, but for some reason, it does not really satisfy me.

Dos you have any idea of scripts that I could use to achieve either of these goals ?

Thank you very much

[jscheuer1]

You could use something like FancyBox (http://fancybox.net/) or ColorBox (http://colorpowered.com/colorbox/) to open them in an iframe within an overlay. However, many sites have 'break out of frames' code. So that might not work.

You could open them in a new window though instead of a tab, the basic syntax for which is (can be all on one line):


<a href="whatever_the_feed_gives_you_here" target="_blank"
onclick="open(this.href, this.target, 'top=100, left=200, width=550, height=450'); return false;"
>whatever_the_feed_gives_you_here</a>

By the way, some browsers will block this and force a new tab or not do it at all. Less will do so live though, so if you're testing locally without a local server, don't get too discouraged.

If you want more help integrating it with what you have, let me know. But you seem pretty savvy. However, I'd need to see the page you have and currently it's not loading very well for me. I gave up after 12+ seconds. I'd also probably need to know what PHP code you have where it differs from that of the DD script you linked to.

[Guillaumeb]

Hey thanks for your reply.

it's weird the page should not be loading for you. it's quite fast over here, even with cleared cache.

Basically i took the script from DynamicDrive and edited the main.php file listing the RSS feeds to be fetched. Then I just placed several blocks on an HTML page
http://dynamicdrive.com/dynamicindex18/rssdisplaybox/index.htm

I copied the source of this HTML page in a txt file
http://guillaumeb.com/newscenter-source.txt

The problem is that I cannot really do that for each link that are generated, at least not in the HTML file. Maybe i have to dig in the other files though.
Alternatively i was thinkg that maybe there would be a script forcing to open all links on a page to open in such an overlay (like there ar script forcing all links to open in a new window).

[jscheuer1]

OK, I tried the page again and it came pretty much right up. But because of the code involved I cannot easily make a local mock up for testing. So we may have to experiment a little.

Yes, you could do something to open all links in a new window, but aren't there other links on the page that you wouldn't want to have that treatment?

Anyways, I see you already have jQuery on the page. So let's start by trying this. Add it to the bottom of the page, right before the closing </body> tag:


<script type="text/javascript">
(function($){
$('div[class*=someclass] a').live('click', function(e){
open(this.href, '_blank', 'top=100, left=200, width=550, height=450, resizable, scrollbars');
e.preventDefault();
});
})(jQuery);
</script>

The browser cache may need to be cleared and/or the page refreshed to see changes.

If it doesn't work, leave it - or make a copy of the page with it so I can have a look at it to see what the problem might be.

[Guillaumeb]

Oh Man! now it does look like something!!! you made my day!!! thank you so much!

[jscheuer1]

Great! I notice that in some cases the window isn't large enough. You can adjust the size in the code, and/or add the resizable and scrollbars keywords. These should probably be added anyway, and I've edited my previous post to show it as well:


<script type="text/javascript">
(function($){
$('div[class*=someclass] a').live('click', function(e){
open(this.href, '_blank', 'top=100, left=200, width=550, height=450, resizable, scrollbars');
e.preventDefault();
});
})(jQuery);
</script>

See also:

http://www.w3schools.com/jsref/met_win_open.asp

open and window.open are the same in this context.