pintersest like functionality for opening new page

[OllieMackJames]

I would like to have the overlay fucntionality of pinterest individual pages.

If you go to pinterest.com and click on any pin, you will see a page that is opened over the underlying page AND in the url address bar you see the url of the opened page, now once clicked beside the page again it closes the overlaid page and returns to the main fornt page.

If you are interested in making this, please PM and I will show you my pinterest type of pw site that already has the frontpage covered, now all I need is the individual page template.

Thanks!

[Joss]

That is a simple light box functionality or modal window that takes content rather than just an image.

There are loads of jquery plugins out there that do it - search for "jquery modal"

Here is a very basic one I have just found - haven't tested it!

http://leanmodal.finelysliced.com.au/

One note: you need to double check what JQuery you are using - For instance Foundation 5 uses JQuery 2, but not all plugins are working with that.

[horst]

If you need a version that works with iframes to load urls, look at this one:

http://thecancerus.com/akmodal-simplest-alternative-to-thickbox/

[dragan]

Lightboxes don't manage / solve the URL rewrite method though. I guess Pinterest is using backbone.js. 

http://backbonejs.org/#Router

[OllieMackJames]

Joss, Horst, thanks for the reply, but like dragan points out (Thanks Dragan) the lighbox does not solve the url rewrite method and that is what I am looking for.

I looked at backbone.js but for the life of me can not figure out how to make that work.

That is why this is posted in the jobs section, cause I would prefer someone to do this for me and make that work, I am not proficient to do this myself.

tnx!

[Joss]

To help anyone that takes this on, this is very useful

http://stackoverflow.com/questions/11252579/how-can-i-duplicate-pinterest-websites-modal-effect

What they are saying is that when you open a lightbox (and it is still just a lightbox type effect, though dynamically loaded), the browser address bar is simply populated with the URL, probably using something like history.pushState. This is probably just one line of code, I think (no expert though!)

Pushstate will put the url into the browser bar, but the browser will not load that url; the user has to complete the action by, for instance, clicking in the bar and pressing return.

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

[Soma]

There's no modal at all just ajax page refreshing, ... just looks like. Close link is a actual link to hompage.

Browser history is set and handled, there's various simple technics. http://caniuse.com/#search=pushstate. No backbone here necessary I guess, for such simple stuff.

[OllieMackJames]

Interesting to get all these reactions about how to do this and how simple this is ...

yet I posted this in the jobs section and though I appreciate the input, it is not going to get the job done I'm afraid, so once again, anybody game to have a go at this?

thanks!

[dragan]

Here's a very basic test page / proof of concept: http://fantastique.ch/pinterest/

Using underscore + backbone + colorbox.

i.e. accessing http://fantastique.ch/pinterest/#backbone-js will load the desired url in the colorbox iframe (not just onClick).

[OllieMackJames]

Hi Dragan,

Thanks for your proof of concept, aprreciate the time you put into that.

I appreciate everyone thinking it is a lightbox and carry on as if that assumption is true, but honestly I do not think this is lightbox functionality at all, I would rather call it background-underpop-functionality.

Now if I were a programmer or webdesigner - which I am not - this is what I would do:
- go to pinterest.com and take the page apart and figure out how it works, not simple for me as I am not a designer/webprogrammer (Joss's linjk pointed to a site where it looks like someone miught have done exactly that http://stackoverflow.com/questions/11252579/how-can-i-duplicate-pinterest-websites-modal-effect)

The lightbox solution that dragan shows uses an iframe and external urls (or image) within that iframe.

This is definitely not the route to go, here's why:

I need/want internal urls, not to show up in an iframe, but to show up with the frontpage as a background if clicked from the homepage, or if from another top-level-category page that page as background, if you look at for example: http://www.pinterest.com/pin/150941024985201396/ you see the page as it is when accessed directly, yet if you access that page from the pinterest homepage, you'll see the page laid-over the homepage, no iframe, but the whole page, scrollable as if it is the page just with the -clicked-from-page-as-background, this is how I need it to be, for at least 2 reasons:

- from an User Interface point of view, because the added scrolling within an iframe makes the page less intuitively easy to scroll and hence I expect the bounce rate to go up, which is a no-go for a number of reasons;

- from an seo point of view, calling the page from within an iframe, with a url that has something added to the basic url like /#name-of-page-in-iframe will lead to duplicate content issues on my site, because the same page will be called from the iframe AND exist with a url addition to the page from which it is called and it will exist on its own url, so twice on one site, that is a no go from seo point of view.

thanks!

[Joss]

I am not a dev, but as I said before, all they are doing is using a line of JQuery to put the url of the linked-to page into the address bar. 

If you look at the source, the modal is in a div with the class "module Closeup canClose" This div is written (using ajax, I would guess) into a div called appendedContainer, which remains on the page unpopulated if you don't click on anything - it is simply a target for the retrieved page

The css for the the closeup div is:

.App .appendedContainer>.Module {
   -webkit-overflow-scrolling: touch;   overflow-y: scroll;
   bottom: 0;
   left: 0;
   position: fixed;
   right: 0;
   top: 0;
   z-index: 680;}

As you can see, it positions itself over the home page content with a z-index to put it on top.

The actual homepage which is being overlaid is in a div called "ajax HomePage Module," just for interest and to help you find your way through the source.

sooooo...

What needs to be done here (by some nice person who can write a couple of lines of code) is for your link to call, by ajax, an actual PW page using its own template (possibly render() - though you would need to get rid of header and footer bits), write it into a div as above and at the same time, pop the URL of that page into the address bar.

I am pretty sure that is how Pinterest are doing it, though foolishly, without PW

It is probably about 4 lines of code and a couple of lines of JQuery to sort out the address bar bit. 

I am really not certain how to do it as I am an ajax virgin, but someone should be able to do it on the back of what I have just written.

By the way, I do not see any SEO advantage to this method - the page is only called in by ajax when the user actually clicks on the image/link and the address bar is only populated at that same point.  From a Search Engines point of view, it will just look at the link on the image, whether or not it has a nice flash popup

Does that help steer you in the right direction?  I am sorry I don't quite know enough to post the actual few lines of the solution.

I could probably work it out eventually, but that would just be by asking everyone here how to do it! haha.

PS: It is very definitely NOT an underpop - though I love that term! It is an overlay.

[Joss]

Jees - I swear you guys managed to "like" that post while I was still writing it!!!!

[horst]

writing or editing it?

[Joss]

oh, probably adding my PS

[OllieMackJames]

Thanks lots Joss, only now see your answer.

I think I am starting to - slowly - grasp what it is, couple of years ago I ran into a js script that would fill in a div with the contents from an external page, so I guess that part would only need to be changed so the js gets activated on a click...

SO I need a page with a basic div structure where the overlay is already in place, BUT unpopulated.

Then on click the js fills the overlay and populates the url location.

OK now the seo part, for bounce rate purposes I need people to visit more pages, the more, the better, so I guess the correct question would then be, how can this - all of the above, that is - be done so each click will be seen / counted as an extra page view?...

thanks again for sharing your thinking power Joss! Much appreciated.

[Joss]

You really need one of the more Ajax knowledgeable people round here to make this work properly.

I am not sure how it could count as an extra pageview, or whether it does on Pinterest - that side of it might not be an issue for them and from the SEO point of view, it is not how many times a page is viewed, but rather whether the page is linked to from other sites.

The link that you click will, from the search engine's point of view, be just an ordinary link - it is the JQuery that will then use that link to create the modal and so on.

If you are looking for stats on what is clicked (which is different from whether it is good SEO or not), then you could create a field for your template that is for hits, and then have it add one each time you click on the link. 

This is an old post from Ryan

http://processwire.com/talk/topic/245-automatic-visit-count-5k-visits-a-day/?p=1661