Post

5 followers Follow
1
Avatar

Jump Links set up over Popups

I have a question is relation to Popups and Jump Links.  I want to reference the magazine WESC which you promote on one of your videos on this site ( http://www.magplus.com/video/wesc-ipad-app-featuring-the-overlay-layer/ ), and in particular their table of contents.

Their contents page is set up with large image thumbnails from each article in the issue.  When an image is clicked a popup occurs covering the same image frame area detailing what is in this article.  Clicking on this popup info allows the user to jump link to that article.  This is what I don't understand and cannot replicate...

When I create the popup on the B-Popup layer this popup frame is now labeled in the Mag+ Object plugin as a popup.  Also this area is now covered by a clickable layer frame.  There is the option of making the Popup clickable area smaller, creating a jump link on the A Pop-up layer within the space you have freed up from the B-Popup area, but this is not the ideal UI/UX

If the users manage to intially hit the A-Pop jump link before the B-Pop clickable area it could cause confusion/frustration.

So can you please tell me how the designers at WESC mange to have a Jump Link set up over a Popup?

 

Thank you for your help in advance,

Ross

Ross MacKay Answered

Post is closed for comments.

10 comments

0
Avatar

Hi Ross - I do this in the magazine I publish. I figure this out by trial and error. Here's a copy and paste from my notes for the steps I follow. Note that I'm using the B-slides-main content/Bp-Popup - main content layers for the example:

  1. Create thumbnail layout/design on B-slides layer.

  2. Select all thumbnails, copy, paste in place on Bp-pop-up layer and add pop-up content.

  3. Group content on the B-slides layer and set as Object Type: Block. This will give generate an Object ID in the Mag+ Object panel. (You'll use this Object ID for the pop-up Reference ID.)

  4. Name each pop-up; e.g. first row a1, a2, a3..., second row b1, b2, b3... and set each one as Object Type: Popup and add the same Popup Group name to all of them.

  5. Create first hotspot for the pop-up. For the first thumbnail in the first row (i.e. a1) the settings in the Object panel would look like this.

-Object type: Hotspot

-Hotspot type: Popup

-Ref. Object ID: (add the Object ID generated in step 3)

-URL: popup://a1

  1. Create the second hotspot for the jump link. (To speed up this process, I just copy and paste in place the first hotspot and change the settings in the Object panel.) The settings in the Object panel for this hotspot would be:

-Object type: Hotspot

-Hotspot type: Jump Link

-Ref. Object ID: a1

-URL: 'the link or vertical you want to jump to goes here.'

So, what this does is create two hotspots, the first one (which is following the block element) triggers the popup and the second one (which is following the pop-up element) triggers the jump link.

Note that if you ungroup the thumbnails on the B-Slides-main content layer, the Object ID will be removed and you'll have to add it again after regrouping. Let me know if there's anything you don't understand and I'll try to help.

I'm sure Mag+ Support will comment if there's an easier/better way to accomplish this.

-Nathan

nathan 0 votes
Comment actions Permalink
0
Avatar

Nathan you are a lifesaver!  That worked a treat.  I was making my mistake by not referencing the jump link to the popup id and it was therefore just a popup over a popup which was cancelling itself out.

 

Thank you very much for you time and help, it's very kind of you.  Best of luck with your future publications!

 

  • Ross

 

Ross MacKay 0 votes
Comment actions Permalink
0
Avatar

Excellent! No problem at all. There was a lot of head-scratching when I did this the first time, hence the notes. Glad I was able to help.

Take care,

Nathan

nathan 0 votes
Comment actions Permalink
0
Avatar

Hello Nathan,

How did you do the contributor's vertical, that no contributor disappears when tapping twice on one of the 12 popups? Jumplinks are referenced to popups (the same as on the contents vertical) and it gives great effect, but here on contributor's vertical, when I tap twice on a popup it should disappear, but remains visible.

Wojtek

Wojtek 0 votes
Comment actions Permalink
0
Avatar

Hi,

I've been trying to place a jump link within a pop up that links to another vertical. I have spent all afternoon and most of the evening trying to follow this tutorial without any success. I can create a link to a web address within the pop up but when I create a jump link to another vertical, it doesn't work. Any help would be greatly appreciated as it's starting to drive me insane! 

Thanks in advance,

Manon

Manon Duhamel 0 votes
Comment actions Permalink
0
Avatar

Hi Manon,

This is similar to the contents page I set up.  So first of all set up your pop up (e.g - a1).  Then simply copy the BLUE link box and move it to the area you would like to hotspot for the jump link.  

With this link box selected go to Mag+ Object > Change 'Hotspot Type' to 'Jump Link'.

Now change the Ref.Object ID to whatever you named your popup - in this example I've used a1

Now in the URL reference the vertical you would like to jump link to - /page_name

 

See attached png for reference.

 

Hope this helps,

Ross

 

Ross MacKay 0 votes
Comment actions Permalink
0
Avatar

Hi Manon,

Ross's instructions are correct. If you're still having trouble I'd be happy to look at your InDesign file and set up a couple of links for you to deconstruct/reverse engineer.

Nathan

nathan 0 votes
Comment actions Permalink
0
Avatar

Hi guys,

Thank you so much for you quick and helpful responses! I finally managed to do it! I realised it was all down to a silly mistake but your extra explanations definitely helped and made everything a lot clearer to me! Thanks again, I really do appreciate it!

Manon

Manon Duhamel 0 votes
Comment actions Permalink
0
Avatar

Hello Wotjek,

I'm not sure how that page was done since I didn't design it. However, if I were to design something like that, I'd use pop-up groups with the first pop-up being initially visible. Then I'd use the '/open' command in the pop-up url, e.g. pop-up://'pop-up object ID here'/open

I've put together a quick example that produces the same effect as the contributor's page in the WESC app. Open up the attched file and take a look at how I did it. Let me know if uou need help with anything.

Nathan

nathan 0 votes
Comment actions Permalink
0
Avatar

Hello Nathan,

Thank you so much! Command '/open' makes it work. So simple thing but it makes my day!

Wojtek

Wojtek 0 votes
Comment actions Permalink