This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Lightbox Magnific Popup doesn't work in a table

Viewing 15 replies - 1 through 15 (of 21 total)
  • Author
    Replies
  • #15018
    Jason Bobich
    Keymaster

    Look at what you’re putting for your thumbnails:

    <div style="display: none;">thumb="http://www.baliberty.com/wp-content/uploads/2013/02/standard-bungalow-tulamben-151-240x150.jpg"</div>

    This part doesn’t mean anything just by itself:

    thumb="http://www.baliberty.com/wp-content/uploads/2013/02/standard-bungalow-tulamben-151-240x150.jpg"

    You need to put actual instances of lightboxes. Here’s the setup again for you like we talked about before:

    [themeblvd_gallery]
    
    <!-- First image that shows initially -->
    [lightbox ...]
    
    <div style="display:none;">
    <!-- hidden images to open up in the lightbox -->
    [lightbox ...]
    [lightbox ...]
    [lightbox ...]
    [lightbox ...]
    [lightbox ...]
    </div>
    
    [/themeblvd_gallery]
    #15032
    missalice
    Participant

    Hi Jason,

    Thanks for your answer. I do admit that I ve trouble with the lightbox.
    I’m not sure to understand your answer.
    My code for these galleries is the same for the 2 webpages :
    – “http://www.baliberty.com/niveau-1-padi-openwater/ >>> NOT WORKING
    http://www.baliberty.com/niveau-2-padi-advanced-open-water/ >>> WORKING

    OK if You’re telling me that my code is not correct, I’ll do my best to do it properly, as your model.

    So, with your model, is should be this ??
    what do i put in

    [themeblvd_gallery]

    [lightbox link=”http://www.baliberty.com/wp-content/uploads/2013/02/standard-bungalow-tulamben-6.jpg&#8221; title=”Standard Bungalow” frame=”true” icon=”image” align=”none”]


    [lightbox link=”http://www.baliberty.com/wp-content/uploads/2013/02/standard-bungalow-tulamben-8.jpg&#8221; title=”Standard Bungalow” frame=”false” icon=”image” align=”none”]
    [lightbox link=”http://www.baliberty.com/wp-content/uploads/2013/02/standard-bungalow-tulamben-151.jpg&#8221; title=”Standard Bungalow” frame=”false” icon=”image” align=”none”]
    [lightbox link=”http://www.baliberty.com/wp-content/uploads/2013/02/standard-bungalow-tulamben-17.jpg&#8221; title=”Standard Bungalow” frame=”false” icon=”image” align=”none”]
    [lightbox link=”http://www.baliberty.com/wp-content/uploads/2013/02/standard-bungalow-tulamben-12.jpg&#8221; title=”Standard Bungalow” frame=”false” icon=”image” align=”none”]
    [lightbox link=”http://www.baliberty.com/wp-content/uploads/2013/02/standard-bungalow-tulamben-14.jpg&#8221; title=”Standard Bungalow” frame=”false” icon=”image” align=”none”]

    [/themeblvd_gallery]

    Thanks for your help,

    Miss Alice

    #15043
    Jason Bobich
    Keymaster

    Hey Alice,

    When you’re posing code into the forum here, wrap it in <pre> tags, and that way we can be on the same page about what you’re doing.

    <pre>
    Your code …
    </pre>

    When I look at your page that isn’t working, I’m seeing this for the hidden lightbox images:

    <a href="" title="" class="themeblvd-lightbox mfp- "></a>

    So, this tells me that you’re not properly using the [lightbox] shortcode. I’m a little confused though, because this should be correct for your hidden images:

    [lightbox link="http://www.baliberty.com/wp-content/uploads/2013/02/standard-bungalow-tulamben-8.jpg" title="Standard Bungalow" frame="false" icon="image" align="none"]

    But the output I’m seeing (which I referenced above) in the source code of your page doesn’t match what you’re saying your’e doing for the [lightbox] shortcode. So, I’m a little confused. — You’ve got it working on the one page, right? So, have a look closer there and try to spot the difference of what you’re doing there compared to what you’re doing on the non-working page.

    #15056
    missalice
    Participant

    Thanks Jason,
    It’s confused because i haven’t yet put the corrected code.
    I want be sure of the code before change the public website (due to poor connection, might stay like this for few days.)
    So, i repeat ma question :
    is the following code is correct and
    PLEASE, WHAT DO I WRITE in

    [themeblvd_gallery]
    <link="http://www.baliberty.com/wp-content/uploads/2013/02/standard-bungalow-tulamben-6.jpg>
    [lightbox link="http://www.baliberty.com/wp-content/uploads/2013/02/standard-bungalow-tulamben-6.jpg" title="Standard Bungalow" frame="true" icon="image" align="none"]
    <div style="display:none;>
    <!-- hidden images to open up in the lightbox ????WHAT DO I HAVE TO PUT HERE ??? -->
    [lightbox link="http://www.baliberty.com/wp-content/uploads/2013/02/standard-bungalow-tulamben-8.jpg" title="Standard Bungalow" frame="false" icon="image" align="none"]
    [lightbox link="http://www.baliberty.com/wp-content/uploads/2013/02/standard-bungalow-tulamben-151.jpg" title="Standard Bungalow" frame="false" icon="image" align="none"]
    [lightbox link="http://www.baliberty.com/wp-content/uploads/2013/02/standard-bungalow-tulamben-17.jpg" title="Standard Bungalow" frame="false" icon="image" align="none"]
    [lightbox link="http://www.baliberty.com/wp-content/uploads/2013/02/standard-bungalow-tulamben-12.jpg" title="Standard Bungalow" frame="false" icon="image" align="none"]
    [lightbox link="http://www.baliberty.com/wp-content/uploads/2013/02/standard-bungalow-tulamben-14.jpg" title="Standard Bungalow" frame="false" icon="image" align="none"]
    </div>
    [/themeblvd_gallery]
    #15069
    Jason Bobich
    Keymaster

    I’m not sure what this part is supposed to be:

    <link="http://www.baliberty.com/wp-content/uploads/2013/02/standard-bungalow-tulamben-6.jpg>

    But I’m not aware of any <link> tag in HTML?

    And your first instance of the [lightbox] shortcode needs a thumbnail image because you want that one to show.

    [lightbox link="http://www.baliberty.com/wp-content/uploads/2013/02/standard-bungalow-tulamben-6.jpg" title="Standard Bungalow" frame="true" icon="image" align="none"]

    Like this:

    [lightbox link="http://www.baliberty.com/wp-content/uploads/2013/02/standard-bungalow-tulamben-6.jpg" thumb="your thumb image..." title="Standard Bungalow" frame="true" icon="image" align="none"]
    #15239
    missalice
    Participant

    Dear Jason,
    So sorry, but I’m still lost and unefficient with theses lightboxes.
    I’ve cleaned all the tabs of my website, using your tab shortcode, because I thought that the issue could came from the “WP table reloaded Plug” in that i used previously.
    I’ve try to clean all the html Lightbox code, using your advice as much as i can understand.
    So, it has been perfectly working for 2 days. I’ve reedit the page for others corrections in the “visual mode’ and visibly, something happens.
    Because now the lightboxes included in these tab, are not visible anymore. Any of them work.
    Clic on the picture, a bigger image appears with arrow on left end right. Clic on the arrow >> empty window, altough there should be 5 images.
    So, could you please CHECK for me ? I can’t find the mistake in the code.
    Can you write me the 4 or 5 first sentences of this code as it has to be ???
    Ma,y many thanks;
    Miss Alice

    #15243
    Jason Bobich
    Keymaster

    I think the problem here is that you’re flipping between Visual and Text mode. With the complexity of the HTML you’re trying to put into your pages, there’s no way you can use the Visual editor in your site on these pages. When you switch to it on a given page, WordPress’s TinyMCE editor is going to mess up the complex HTML you’ve written.

    If it was working for a couple of days previously, then that means you had it right. So, just get back in Text mode and set it up the same again. But just keep in mind that you cannot use the visual editor with these kinds of things you’re doing. It might help to turn it off so you don’t accidentally switch to it. Just go to your user’s profile settings, and you can disable the visual editor.

    #15259
    missalice
    Participant

    Hi Jason,
    I’ve already try to recover the version where the Lightbox is working but for these versions the layout inside the table is not correct (lines and words spacing..).
    AND I WANT TO LEARN TO DO IT PROPERLY !
    So, I’ve kept the last version and I’ve paste your MODEL code :
    (For you, I’m just talking about the first lightbox, the one for the “STANDARD BUNGALOW” on this page http://www.baliberty.com/niveau-1-padi-openwater/. But it’s the same issue for the 2 others more (Superior and Deluxe Cottage))

    [themeblvd_gallery][lightbox link="http://www.baliberty.com/wp-content/uploads/2013/02/standard-bungalow-tulamben-6.jpg" thumb="http://www.baliberty.com/wp-content/uploads/2013/02/standard-bungalow-tulamben-6-240x150.jpg" title="Standard Bungalow" frame="true" icon="image" align="none"] title="Standard Bungalow" frame="true" icon="image" align="none"]
    <div style="display:none;>
    [lightbox link="http://www.baliberty.com/wp-content/uploads/2013/02/standard-bungalow-tulamben-8.jpg" title="Standard Bungalow" frame="false" icon="image" align="none"]
    [lightbox link="http://www.baliberty.com/wp-content/uploads/2013/02/standard-bungalow-tulamben-151.jpg" title="Standard Bungalow" frame="false" icon="image" align="none"]
    [lightbox link="http://www.baliberty.com/wp-content/uploads/2013/02/standard-bungalow-tulamben-17.jpg" title="Standard Bungalow" frame="false" icon="image" align="none"]
    [lightbox link="http://www.baliberty.com/wp-content/uploads/2013/02/standard-bungalow-tulamben-12.jpg" title="Standard Bungalow" frame="false" icon="image" align="none"]
    [lightbox link="http://www.baliberty.com/wp-content/uploads/2013/02/standard-bungalow-tulamben-14.jpg" title="Standard Bungalow" frame="false" icon="image" align="none"]
    </div>[/themeblvd_gallery]

    >>> NOT WORKING
    SO I’ve tried the same but with Thumbails :

    [themeblvd_gallery][lightbox link="http://www.baliberty.com/wp-content/uploads/2013/02/standard-bungalow-tulamben-6.jpg" thumb="http://www.baliberty.com/wp-content/uploads/2013/02/standard-bungalow-tulamben-6-240x150.jpg" title="Standard Bungalow" frame="true" icon="image" align="none"] title="Standard Bungalow" frame="true" icon="image" align="none"]
    <div style="display:none;>
    [lightbox link="http://www.baliberty.com/wp-content/uploads/2013/02/standard-bungalow-tulamben-8.jpg" thumb="http://www.baliberty.com/wp-content/uploads/2013/02/standard-bungalow-tulamben-8-240x150.jpg" title="Standard Bungalow" frame="false" icon="image" align="none"]
    [lightbox link="http://www.baliberty.com/wp-content/uploads/2013/02/standard-bungalow-tulamben-151.jpg" thumb="http://www.baliberty.com/wp-content/uploads/2013/02/standard-bungalow-tulamben-151-240x150.jpg" title="Standard Bungalow" frame="false" icon="image" align="none"]
    [lightbox link="http://www.baliberty.com/wp-content/uploads/2013/02/standard-bungalow-tulamben-17.jpg" thumb="http://www.baliberty.com/wp-content/uploads/2013/02/standard-bungalow-tulamben-17-240x150.jpg" title="Standard Bungalow" frame="false" icon="image" align="none"]
    [lightbox link="http://www.baliberty.com/wp-content/uploads/2013/02/standard-bungalow-tulamben-12.jpg" thumb="http://www.baliberty.com/wp-content/uploads/2013/02/standard-bungalow-tulamben-12-240x150.jpg" title="Standard Bungalow" frame="false" icon="image" align="none"]
    [lightbox link="http://www.baliberty.com/wp-content/uploads/2013/02/standard-bungalow-tulamben-14.jpg" thumb="http://www.baliberty.com/wp-content/uploads/2013/02/standard-bungalow-tulamben-14-240x150.jpg" title="Standard Bungalow" frame="false" icon="image" align="none"]
    </div>[/themeblvd_gallery]

    >>> NOT WORKING
    After many others test,
    I’ve put this one :

    [lightbox_gallery]
    [lightbox link="http://www.baliberty.com/wp-content/uploads/2013/02/standard-bungalow-tulamben-6.jpg" thumb="http://www.baliberty.com/wp-content/uploads/2013/02/standard-bungalow-tulamben-6-240x150.jpg" title="Standard Bungalow" frame="true" icon="image"]
    [lightbox link="http://www.baliberty.com/wp-content/uploads/2013/02/standard-bungalow-tulamben-8.jpg" thumb="http://www.baliberty.com/wp-content/uploads/2013/02/standard-bungalow-tulamben-8-240x150.jpg"
    title="Standard Bungalow" frame="false" icon="image"]
    [lightbox link="http://www.baliberty.com/wp-content/uploads/2013/02/standard-bungalow-tulamben-151.jpg" thumb="http://www.baliberty.com/wp-content/uploads/2013/02/standard-bungalow-tulamben-151-240x150.jpg"
    title="Standard Bungalow" frame="false" icon="image"]
    [lightbox link="http://www.baliberty.com/wp-content/uploads/2013/02/standard-bungalow-tulamben-17.jpg" thumb="http://www.baliberty.com/wp-content/uploads/2013/02/standard-bungalow-tulamben-17-240x150.jpg"
    title="Standard Bungalow" frame="false" icon="image"]
    [lightbox link="http://www.baliberty.com/wp-content/uploads/2013/02/standard-bungalow-tulamben-12.jpg" thumb="http://www.baliberty.com/wp-content/uploads/2013/02/standard-bungalow-tulamben-12-240x150.jpg"
    title="Standard Bungalow" frame="false" icon="image"]
    [lightbox link="http://www.baliberty.com/wp-content/uploads/2013/02/standard-bungalow-tulamben-14.jpg" thumb="http://www.baliberty.com/wp-content/uploads/2013/02/standard-bungalow-tulamben-14-240x150.jpg"
    title="Standard Bungalow" frame="false" icon="image"]
    [/lightbox_gallery]

    >>> IT’S WORKING like i want !
    WHY ? I don’t know. Can you explain me ?

    HOWEVER, NOW I have 2 new problems :

    PB n°1
    There is a HUGE WHITE SPACE just below the 3 LBox thumbails before the low border, in the table
    http://postimg.org/image/vg28hsf6x/131b7426/
    instead of this one
    http://postimg.org/image/8kc5qecpt/
    (both picture with Safari)

    PB n°2
    On SAFARI, the width of the 5 columns are respected as i mentioned it :

    so that ALL THE Column title are in 1 line = OK
    BUT ON FIREFOX, with the same code,
    the 2d column is reduced so that the text “FORMATION SEULE” is cut, and on 2 lines. Even if i put a «   » bettween FORMATION and SEULE, the text go on 2 lines.
    http://postimg.org/image/g5jj8997j/e6184f74/

    SO, could you please help me to fix this :
    – Lightbox Integration = Correct or not ?
    – PN n° 1
    – PB N° 2
    Do you need an access to my WP administration ?
    If yes, please, let me know.
    Many thanks
    Miss Alice

    #15276
    Jason Bobich
    Keymaster

    For doing complex HTML like this, it may be helpful for you to use our [raw] shortcode so you aren’t getting WordPress’s automatic formatting adding <p> and <br> throughout your HTML tags where you don’t intend.

    [raw]
    your html here ...
    [/raw]

    Not sure why the first one wasn’t working. Could it possibly be this random piece floating there, which doesn’t belong?

    For the other issues.

    1) Make sure you’re exclusively using the Text tab. Do not switch at all to the Visual tab. I recommend disabling it completely from your User profile settings.

    2) Wrap all of your HTML in our shortcode plugin’s [raw] shortcode.

    #15383
    missalice
    Participant

    Dear Jason,
    Thanks for your advice. Much better with
    Visual editor NOT ACTIVE + [raw] my html code [/raw].
    Just to let you know :
    So I’ve tried again to use YOUR Themeblvd Gallery, without the random floating piece >>> still weird.
    So, I’m still using the “Lightbox Galery”, with your 2 main advices … THAT IS PERFECT on SAFARI.

    BUT, on FF, the Table is NOT OK at all .
    Please have a look :
    on Safari : OK
    http://postimg.org/image/v7oewzl25/

    Problem on FF
    http://postimg.org/image/fzlgfxa9r/
    Here the big table is OUT OVER on the right side, compare with the picture on top and the small table dow. AND the 2d column is not the same wight than the 3 last ones (These 4 columns should be 21 % meanwhile the first is 16%)

    Can you help me to fix this ?
    Thanks a lot

    Miss Alice

    #15405
    Jason Bobich
    Keymaster

    I think Firefox might be acting up because of this that I just noticed:

    Every where you have this:

    <div style="display:none;>

    You’re missing a quotation ". It should be this:

    <div style="display:none;">

    Outside of noticing that, I’m sorry but I really don’t know the answer to why your table columns are not coming out the way you want.

    #15426
    missalice
    Participant

    Dear Jason,
    I’ve changed what you’ve told. However, nothing has changed.
    So now, the 2 tables of this page,
    the big (with lightboxes inside) and the small one
    http://www.baliberty.com/niveau-1-padi-openwater/
    are perfect on any devices on SAFARI.
    BUT on FF (and IE, i don’t know) :
    the small table is perfectly responsive on 3 devices (smartphone/tablet/computer) but the
    big table is OUT on smartphone & tablet.
    Might it be because the Akita theme’s responsive stylesheet does not contain any styling for tables ?
    http://www.baliberty.com/wp-content/themes/akita/assets/css/responsive.css
    Can you improve this ?
    Many thanks again,
    Miss Alice

    #15427
    missalice
    Participant

    Last thing :
    I have tried to adjust the width of the table, but that simply is not possible.
    I expect that when I give a table a width of 700px and a max-width of 700px itadhers to that, but for some reason your tables do not “listen to that”.

    May it help you ?

    Thanks

    Alice

    #15447
    Jason Bobich
    Keymaster

    BUT, on FF, the Table is NOT OK at all .

    I’ve changed what you’ve told. However, nothing has changed.

    To answer your original question a few days ago, I wanted you to know I have looked at your site in Firefox, and I do not see the issue you were referencing. To my understanding, your table looks exactly as how you want it to look. Here is what I see in Firefox:

    http://www.uploadblvd.com/uploads/image_531d3066561cd.png

    I have tried to adjust the width of the table, but that simply is not possible.
    I expect that when I give a table a width of 700px and a max-width of 700px itadhers to that but for some reason your tables do not “listen to that”.

    I’m looking at your page of tables, but I do not see how you’re trying to adjust the width of the table to 700px? I see a width: 100% on it, but that’s all.

    For example, one way you could do it is:

    <table style="max-width: 700px;" class="table table-responsive table-striped table-condensed table-bordered">

    Here’s a screenshot of what it would look like:

    http://www.uploadblvd.com/uploads/image_531d3301dfc81.png

    … but for some reason your tables do not “listen to that”.

    Ha it’s cute when you say “your tables” — It may help you to know that this is all styled by a frontend framework we use called Twitter Bootstrap if you want to read any of their documentation on tables. I’m telling you this because these are great resources for how much you’re working with these tables and the HTML.

    Akita 2.1+

    http://getbootstrap.com/css/#tables
    http://getbootstrap.com/css/#tables-responsive

    Akita 2.0

    http://getbootstrap.com/2.3.2/base-css.html#tables

    the small table is perfectly responsive on 3 devices (smartphone/tablet/computer) but the
    big table is OUT on smartphone & tablet.

    Classically, tables aren’t something that were ever meant to be responsive down to such small viewports. I think you’re seeing a difference simply because the smaller table has less content to try and shove into the smaller area.

    Might it be because the Akita theme’s responsive stylesheet does not contain any styling for tables ?

    Now, I notice you’re using the class “table-responsive” on your two tables. I’m not sure if you had just copied this from one of our demo pages, or maybe I gave it to you previously, but this class is only available in Bootstrap 3+. There’s no true way to make a table responsive in the sense of talking about going down to a smartphone because there’s always going to be a point where the content simply doesn’t fit horizontally.

    In Bootstrap 3, they actually came up with a creative solution for this, which was to essentially allow tables to be scrollable horizontally when you get down too small. This way, they don’t obstruct the overall layout of the page. And this is what that “table-responsive” class does that you’re trying to use now.

    In order to get this responsive table feature of Bootstrap, you’d need to update your theme to Akita 2.1:

    http://themeblvd.com/changelog/?theme=akita

    #15488
    missalice
    Participant

    Dear Jason,
    Thank you very much for your patience and all these different answers and advices.
    I’m gonna try to do all you recommande by myself in few days.
    I’m not very optimistic.
    Because if all of that were the reasons, it wouldn’t work perfectly on Safari, would it ?
    And none is abble to explain why there is NO problem at all an Safari and why it’s not working on FF.
    If I could get THIS answer, I think i’d resolve the issue. But actually, it seems to be a real mystery 😉
    Many thanks again.
    Best Regards
    Miss Alice

Viewing 15 replies - 1 through 15 (of 21 total)
  • The forum ‘Akita Responsive WordPress Theme’ is closed to new topics and replies.