• Forum
  • FAQ
  • Docs
Notice: In order to post a support question you have to have an account and be logged in.
Register  or  Login
  1. Hello Themefuse Team,

    I'm trying to get the "inline content" feature from prettyPhoto working.
    First I directly copied the inline demo from the author's website and it didn't work, example code:

    <a href="#inline-1" rel="prettyPhoto">Open Lightbox</a>
    <div id="inline-1" class="hide"><p>INLINE CONTENT</p></div>

    When I click on that link I get the error message "Image cannot be loaded. Make sure the path is correct and the image exists".

    The problem seems to be that WordPress or the Browser (latest Firefox in my case) does something wrong with the Url.
    I came to that conclusion because it works when I edit the above Url in the resulting source code from "http://example.com/test#inline-1" to simply "#inline-1" (using Firebug)...

    Do you know what the problem is and how I can fix it?

    happysmile :)

    1 year ago
  2. Hi,

    I tried the code provided by you, and all works fine.

    Please provide wordpress installation link from page you use this code.


    1 year ago
  3. Sorry, cannot give you a link because currently it's installed locally.

    What I can tell you though is that the demo (which works for me) uses the following code to link to the inline content:
    <a rel="prettyPhoto[inline]" href="#inline-2"><img width="50" alt="" src="/wp-content/themes/NMFE/images/thumbnails/earth-logo.jpg"></a>
    When I copy the exact same code into WordPress and view the resulting source I see this:
    <a href="http://example.com/test#inline-2&quot; rel="prettyPhoto[inline]"><img width="50" src="/wp-content/themes/NMFE/images/thumbnails/earth-logo.jpg" alt=""></a> (without the "&quot ;")

    So obviously Welcome Inn is adding the URL of the current site if there is no real link. I think only Welcome Inn is doing this because the demo site above uses WordPress as well and everything works fine...

    As I already said I was able to get it working by removing the automatically added "http://example.com/test" part from the link (using Firebug).
    So how can I stop Welcome Inn from adding that to the link? I tried the "[raw]" shortcode but it made no difference. Maybe it's even possible to modify prettyPhoto so that it accepts that wrong inline trigger?

    happysmile :)

    1 year ago
  4. Hi,
    actually this is not just a welcome inn problem. Everywhere where you are using a link without http:// it would be added your site link. So, the only way to solve this is to use full link.


    1 year ago
  5. Hi Max,

    Sorry, but your explanation isn't completely correct. Links without "http://" might be interpreted as you've explained. However in this case the baseurl part isn't added by the browser as it should normally be the case, but it's added by WordPress - thus the Welcome Inn theme?!

    What I just found out: prettyPhoto detects the display mode like this:
    if(itemSrc.substr(0,1) == '#') { return 'inline'; }
    So it wouldn't work with normal links anyway when the base-part gets added automatically.
    So either I have to edit "jquery.prettyPhoto.js" to my needs or there is something wrong in Wordpress / the theme which needs to be fix. Maybe this isn't even a bug but a feature, right? ;-)

    Other question:
    On the developer's website I can see that the most up-to-date version (v3.1.4) has some other bug fixes compared to the version used in Welcome Inn (v3.1.0).
    Can I simply replace the used version by the new one or does some other important functionality depend on it?

    1 year ago
  6. Hi,
    I just tested inline content with welcome inn theme and all works very well. I used the code from the demo. Not sure what you are doing wrong. You can see here that is working. What about the link, sorry, I thought that you are talking about the one with wp-content... anyway, for other ones site link is added too, you can see even in the demo of prettyphoto.


    1 year ago
  7. I don't know why I have this issue with my Wordpress installation. Anyway, I found a solution to my problem and even added a news featute to prettyPhoto. Here are the changes of Welcome Inn's "jquery.prettyPhoto.js":

    - Approx. line 643: Replace the detection of "inline" mode with
    }else if(itemSrc.indexOf('#') != -1){
    - Approx. line 318: Replace whole inline code with

    idname = pp_images[set_position];
    idname = idname.match(/#.*?(?=\?|&|$)/)[0];  // Get ID part from between '#' and ('&' or '?' or end)
    // to get the item height clone it, apply default/param width, wrap it in prettyPhoto containers, get height using _fitToViewport(), then delete
    myClone = $(idname).clone().css({'width':parseFloat(movie_width)}).wrapInner('<div id="pp_full_res"><div class="pp_inline"></div></div>').appendTo($('body')).show();
    doresize = false; // Make sure the dimensions are not resized.
    pp_dimensions = _fitToViewport($(myClone).width(),$(myClone).height());
    doresize = true; // Reset the dimensions
    toInject = settings.inline_markup.replace(/{content}/g,$(idname).html());

    So what changed with these modifications?
    First and most important of all the error I had is gone. Second the inline box was a little too high. Also it's now possible to optionally set the content boxs width (-> #id?width=600) instead of the annoying default width!

    happysmile :)

    1 year ago

Add Reply

You must log in to post.


Add a new topic!

Chances are your issue is already answered, but if it’s not, you can always create a new topic.

Add new topic

Search forums

Searching for something specific? Type something and press Enter to search.