[Plugin: Easy FancyBox] Easy Fancy Box – Inline Content, using rel="" to make gallery dupl

  • Resolved cconti77

    (@cconti77)


    12 years, 8 months ago

    I have set up Easy Fancy Box to show a hidden div filled with content. I tried adding rel=”gal1″ so the user can scroll through the inline content while in the fancy box overlay. It works except when I click the arrow fancy box reloads the current content, on the next (3rd) click it goes to the next piece of content however it loads that twice too. Any suggestions??

    page using code:
    (*note I have disabled the effect by changing the rel=”” to blank which just loads the content and does not allow the user to scroll through since the site is live. I will re-enable the effect if you need to see, just ask.)
    https://www.miamibjjcenter.com/black-belt/

    Please any suggestions, help?? Its driving me nuts. I am guessing that Easy Fancy box is duplicating the content when loading it into the frame but I cant figure out how to fix it!

    https://www.ads-software.com/extend/plugins/easy-fancybox/

Viewing 2 replies - 1 through 2 (of 2 total)

  • It’s a funny effect that I have never seen before but I can tell you what causes is (just not how)… You are making some basic mistakes in the HTML markup of your content which seem to confuse the FancyBox script so much it thows in some extra gallery items.

    You are nesting different elements the wrong way. I’ll try to explain:

    1. Within A (link) tags you first end a non existing paragraph with </p> and than start one that never gets closed with <p> like here:

    <a class="fancybox" rel="gal" href="#bb-jm"><br />
<img src="https://www.miamibjjcenter.com/wp-content/uploads/2011/02/bb-sm-jacob.jpg" alt="Jacob Mackenzie" width="160" height="120" class="alignnone size-full wp-image-377" />	</p>
<h3>Jacob Mackenzie</h3>
<p></a>

    Remove these P tags.

    2. Within the UL (unordered list) tag you have inserted this hidden DIVs but they cannot live outside the LI (list item) tags there:

    <ul>
<li>...your link code here...</li>
<div class="fancybox-hidden">...your inline content here...</div>
<li>...your link code here...</li>
<div class="fancybox-hidden">...your inline content here...</div>
...etc...
</ul>

    You need to either place these hidden divs inside the LI tags or move them all outside the UL tag completely. Both cases will work the same.

    To filter out these kinds of mistakes, use the https://validator.w3.org/ HTML markup validation service on your pages.

    Thread Starter cconti77

    (@cconti77)

    Thanks so much for the response. Very strange issue I was having. Even after moving the DIV’S inside the li’s. It seems wordpress was wrapping my code in unwanted <p> tags. I tried adding a custom plug-in from another forum that would remove this for people having the same issue and didn’t have much luck. I did not create this site or themes only temporarily updating it.

    So I just created a custom page and hard-coded the information which works for now however I still wish I could figure out why wordpress was altering my code so badly. Maybe because it was through the editor or maybe with how it was pasted into the editor. Don’t have anymore time to waste on it tho. But others having this issue might try:

    <a href=”Seems like this person was having the same issue if anyone else does.
    https://www.ads-software.com/support/topic/anchor-wrapped-div-created-duplicate-link”>Seems like this person was having the same issue if anyone else does.
    https://www.ads-software.com/support/topic/anchor-wrapped-div-created-duplicate-link
    &
    https://wordpress.stackexchange.com/questions/7090/stop-wordpress-wrapping-images-in-a-p-tag

    peace

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘[Plugin: Easy FancyBox] Easy Fancy Box – Inline Content, using rel="" to make gallery dupl’ is closed to new replies.