Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

(instagram) Doesn't work in timeline nor when you open a post in a new tab

About: Mouseover Popup Image Viewer
edited April 17 in Script Discussions Firefox

Currently MPIV only works in profile pages, eg https://instagram.com/instagram/.
It doesn't work in instagram timeline nor when you open a timeline post in a new tab.

To reproduce (FF 39 with GM 3.2):

Note: the aforementioned image's natural size is 1080x1080 therefore MPIV should display it on mouseover

Comments

  • edited July 2015 Firefox

    Note: the setting
    Only show popup over scaled-down image when natural size is x times larger
    has it's default value 1.5

    Examining the aforementioned image in Firefox's rightclick | View Page Info | Media tab
    it's 1080x1080 scaled down to 640x640
    i.e. it's natural size is near 1.7 times larger than the scaled down
    therefore MPIV should display it on mouseover

  • edited September 2015 Firefox
    Popup doesn't show up in opened posts because there's an invisible element in front of the image blocking the mouse focus. This host rule fixes it for me:

    (removed, rule is now built-in)

    I don't have an account to see what's going on in timelines. Probably a similar thing.
  • edited July 2015 Default Browser

    It works great in posts and in timeline. Thank you very much!

    Edit: alternative approach (based on your rule):
    block instagram.com##.-cx-PRIVATE-Photo__clickShield in AdBlock Plus.
    Then MPIV works ok as it is (without the extra rule).

  • edited December 2015 Default Browser

    Since today, the script no longer works in timeline
    nor when you open a post in a new tab.

    To reproduce (MPIV 2015.11.9 in GM 3.6 with FF 42) just open this post in a new tab
    and then mouseover on the thumbnail (the full size pic is 1080x1080).

    (There are no errors in Browser Console)

  • Default Browser
    Fixed in version 2015.12.6.
  • Default Browser

    Thank you very much!

  • edited April 18 Firefox

    The latest layout changes in instagram broke MPIV functionality in any kind of
    instagram posts once more.
    The script doesn't work:

    • neither in instagram timeline
    • nor when you open a timeline post in a new tab.
    • nor in 'slideshow' photo/video posts (i.e. in posts with 'next/back' buttons, it's a new instagram feature) (this was first mentioned in here )

    I'm getting (using MPIV 2017.4.6 with GM 3.8 in FF52)
    m is undefined at line 122 of the script.

    Example links:

    https://www.instagram.com/kulinersby/          (profile page)
    https://www.instagram.com/p/BS-3LndAycf/       (simple image post)
    https://www.instagram.com/p/BRxpXexA1WZ/       (slideshow image post)
    https://www.instagram.com/p/BSR88d2la9k/       (slideshow video post)
    


    I tried correcting this by examining a page with ?__a=1 such as https://www.instagram.com/p/BRxpXexA1WZ/?__a=1.
    The related lines are 121 and 122.
    So, I think that line 122 should change from:

    {r:/instagr(\.am|am\.com)\/p\//i, s:function(m) { return m.input.substr(0, m.input.lastIndexOf('/')) + '/?__a=1'; }, q:function(text) { var m = JSON.parse(text).media; return m.video_url || m.display_src.replace(/\/[sp]\d+x\d+\//, '/').replace(/\?.+/, ''); }, rect:'div.PhotoGridMediaItem', c:function(text) { return JSON.parse(text).media.caption; } },
    

    into

    {r:/instagr(\.am|am\.com)\/p\//i, s:function(m) { return m.input.substr(0, m.input.lastIndexOf('/')) + '/?__a=1'; }, q:function(text) { var m = JSON.parse(text).shortcode_media; return m.video_url || m.display_url.replace(/\/[sp]\d+x\d+\//, '/').replace(/\?.+/, ''); },  c:function(text) { return JSON.parse(text).shortcode_media.edge_media_to_caption.edges[0].node.text; } },
    

    i.e.
    media --> shortcode_media
    display_src --> display_url
    media.caption --> shortcode_media.edge_media_to_caption.edges[0].node.text
    rect:'div.PhotoGridMediaItem', --> (remove it -or change it-, I think that this selector no longer applies)


    but unfortunately it still doesn't work.

  • Yes, MPIV stop working on Instagram. I have the same issue either on Firefox either on Google Chrome. Hope this will be fix soon.
  • edited April 19 Firefox

    Hey, Darkred, I think you were really close, but you missed the graphql object wrapping the whole thing. I updated that host config to look like this:

    {r:/instagr(\.am|am\.com)\/p\//i, s:function(m) { return m.input.substr(0, m.input.lastIndexOf('/')) + '/?__a=1'; }, q:function(text) { var m = JSON.parse(text).graphql.shortcode_media;return m.video_url || m.display_url.replace(/\/[sp]\d+x\d+\//, '/').replace(/\?.+/, ''); }, rect:'div.PhotoGridMediaItem', c:function(text) { var m = JSON.parse(text).graphql.shortcode_media.edge_media_to_caption.edges[0]; if ( m === undefined ) { return "(no caption)"; } return m.node.text; } },
    

    Edit: Handle zero caption case.

    I've restored the functionality (I think), but it leaves some open questions, which may require more investigation into the new response format...

    • Will m.video_url ever be a thing with these new changes?
    • Is edge_media_to_caption.edges[0] always the "main" caption?
    • Do we still need the rect field to be set in this rule?
  • edited April 20 Firefox

    Thank you @macserv. The functionality is restored.


    In addition to your questions, I'd like to add one note, that:

    • it still doesn't work in slideshow photo or video posts, such as:
    https://www.instagram.com/p/BRxpXexA1WZ/       (slideshow image post)
    https://www.instagram.com/p/BSR88d2la9k/       (slideshow video post)
    

    i.e. when mouseover the 2nd,3rd,etc image/video in such posts,
    the 1st image is always displayed, instead.

    I noticed in the relevant ?__a=1 URL,
    https://www.instagram.com/p/BRxpXexA1WZ/?__a=1
    that the URLs for these 2nd, 3rd images, etc
    are contained as:

    graphql.shortcode_media.edge_sidecar_to_children.edges[0/1/2/etc].node.display_url

    instead of

    graphql.shortcode_media.display_url

  • I added the following line from macserv:
    {r:/instagr(\.am|am\.com)\/p\//i, s:function(m) { return m.input.substr(0, m.input.lastIndexOf('/')) + '/?__a=1'; }, q:function(text) { var m = JSON.parse(text).graphql.shortcode_media;return m.video_url || m.display_url.replace(/\/[sp]\d+x\d+\//, '/').replace(/\?.+/, ''); }, rect:'div.PhotoGridMediaItem', c:function(text) { var m = JSON.parse(text).graphql.shortcode_media.edge_media_to_caption.edges[0]; if ( m === undefined ) { return "(no caption)"; } return m.node.text; } },

    But it still doesn't work. Could you please share the entire MPIV script edited here ?
  • I added the following line from macserv:
    But it still doesn't work.

    Don't add it; replace line 122 with that by macserv.

  • @darkred and macserv
    It works perfectly, thank you.

    Other questions nothing to do with MPIV. When I click on a picture on instagram, I got a pop up window with the picture and comment. Since a few last days, if I close this pop up, Instagram automatically come back to the first picture. Imagine you want to look at the entire profile with 500 pics. Every time you click on a picture you go back automatically to the first pictures of this profile. This is very annoying and this didn't occur before the last Instagram update.
    Do you know how to bypass and to avoid that Instagram automatically go back to the first pictures ? Any trick ?
  • edited April 21 Firefox
    Thanks darkred and macserv, for your help :)
  • edited April 24 Firefox
    Fix incorporated in version 2017.4.24.1. Thanks!
Sign In or Register to comment.