Okay
  Public Ticket #3544799
Image columns and the lighbox
Closed

Comments

  • John started the conversation

    Hi - I am using wpdatatables and have an image link in one of my columns. I have followed the instructions for an image column in the database and have two images one being a thumbnail and the other being a full-sized image. They are separated by two vertical bars || as specified. So far so good.

    The problem is: when i click on the image the lightbox does not have the same behaviors that are in your demo: https://wpdatatables.com/documentation/column-features/image-columns/

    In your demo, the lightbox opens on the same page as table; the images are of different sizes and they close when the image is clicked. However, my images when clicked, go to a different page; they do not close when clicked - instead they change sizes, and they certainly don't show the other images in the table. 

    I see that you are using WP Lightbox 2. I have tried that but it makes no difference. I suspect that the way you have stored the images in the database lends itself to be used by appropriately by WP Lightbox 2 but there is no documentation on this that I can find.

    Please let me how you set up the image column in the database so that we can experience similar behaviors to the image column in your demo.

    Your help would be greatly appreciated.

  •  2,499
    Aleksandar replied

    Hello John.

    That table is made from a serialized PHP Array and it's really as basic as it can be:

    a:10:{i:0;a:6:{s:5:"Brand";s:10:"Volkswagen";s:5:"Model";s:4:"Golf";s:8:"Submodel";s:1:"4";s:4:"Year";s:4:"1999";s:5:"Price";s:4:"3000";s:5:"Photo";s:65:"/input_source/images/golf4_sm.jpg||/input_source/images/golf4.jpg";}i:1;a:6:{s:5:"Brand";s:10:"Volkswagen";s:5:"Model";s:4:"Golf";s:8:"Submodel";s:1:"5";s:4:"Year";s:4:"2004";s:5:"Price";s:4:"6000";s:5:"Photo";s:65:"/input_source/images/golf5_sm.jpg||/input_source/images/golf5.jpg";}i:2;a:6:{s:5:"Brand";s:10:"Volkswagen";s:5:"Model";s:6:"Passat";s:8:"Submodel";s:2:"B4";s:4:"Year";s:4:"2001";s:5:"Price";s:4:"5000";s:5:"Photo";s:74:"/input_source/images/passatb4_sm.jpg||/input_source/images/passatb4_sm.jpg";}i:3;a:6:{s:5:"Brand";s:3:"BMW";s:5:"Model";s:8:"3 Series";s:8:"Submodel";s:7:"318 E46";s:4:"Year";s:4:"2002";s:5:"Price";s:4:"6000";s:5:"Photo";s:63:"/input_source/images/bmw3_sm.jpg||/input_source/images/bmw3.jpg";}i:4;a:6:{s:5:"Brand";s:3:"BMW";s:5:"Model";s:8:"1 Series";s:8:"Submodel";s:3:"116";s:4:"Year";s:4:"2004";s:5:"Price";s:4:"6000";s:5:"Photo";s:63:"/input_source/images/bmw1_sm.jpg||/input_source/images/bmw1.jpg";}i:5;a:6:{s:5:"Brand";s:3:"BMW";s:5:"Model";s:8:"7 Series";s:8:"Submodel";s:3:"728";s:4:"Year";s:4:"2004";s:5:"Price";s:4:"8000";s:5:"Photo";s:63:"/input_source/images/bmw7_sm.jpg||/input_source/images/bmw7.jpg";}i:6;a:6:{s:5:"Brand";s:4:"Audi";s:5:"Model";s:2:"A4";s:8:"Submodel";s:3:"TDI";s:4:"Year";s:4:"2004";s:5:"Price";s:4:"7000";s:5:"Photo";s:67:"/input_source/images/audia4_sm.jpg||/input_source/images/audia4.jpg";}i:7;a:6:{s:5:"Brand";s:7:"Citroen";s:5:"Model";s:2:"C4";s:8:"Submodel";s:3:"TDI";s:4:"Year";s:4:"2008";s:5:"Price";s:4:"3000";s:5:"Photo";s:83:"/input_source/images/citroenpicasso_sm.jpg||/input_source/images/citroenpicasso.jpg";}i:8;a:6:{s:5:"Brand";s:4:"Audi";s:5:"Model";s:2:"A6";s:8:"Submodel";s:7:"Quattro";s:4:"Year";s:4:"2000";s:5:"Price";s:4:"5000";s:5:"Photo";s:67:"/input_source/images/audia6_sm.jpg||/input_source/images/audia6.jpg";}i:9;a:6:{s:5:"Brand";s:4:"Lada";s:5:"Model";s:6:"Priora";s:8:"Submodel";s:5:"Dag05";s:4:"Year";s:4:"2011";s:5:"Price";s:5:"10000";s:5:"Photo";s:75:"/input_source/images/ladapriora_sm.jpg||/input_source/images/ladapriora.jpg";}}
    

    In short, this is one row:

    "Brand"; "Volkswagen"; "Model"; "Golf"; "Submodel"; "4"; "Year"; "1999"; "Price"; "3000"; "Photo"; "/input_source/images/golf4_sm.jpg||/input_source/images/golf4.jpg";

    So, just like you did, we've added two images with different sizes, so when the small one is clicked, the bigger one is opened.

    These are the settings of WP Lightbox 2, so you can try copying those:

    2464328077.png

    I hope that helps!

    Kind Regards, 

    Aleksandar Vuković
    [email protected]

    Rate my support

    wpDataTables: FAQ | Facebook | Twitter | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia demo sites | Docs | Discord Community

    You can try wpDataTables add-ons before purchasing on these sandbox sites:

    Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables

  • John replied

    Hi Aleksandar,

    Thank you for your response.  From your reply it looks like we have followed your instructions to the letter. However, this does not work at all for us. 

    It looks like you are packaging WP Lightbox 2 in your product, and unless we are doing something obviously wrong, we do not get the same result that you have in your demo. This might have something to do with the version of Wordpress we are using. If you wouldn't mind, could you verify that it works with Wordpress 6.4.2 which is the version we are using.

    Many thanks,

    John

  •  2,499
    Aleksandar replied

    You may be right about that, John. Our website is still on Version 6.3.2 but I know that we will update it soon.

    I can troubleshoot this on your site if you want.

    If you're OK with that, kindly share a temporary WP-admin (administrator) user for your site where the issue is occurring. This allows us to log in and examine the situation firsthand, which is the most efficient way to identify and resolve the problem.

    Rest assured, we do not interfere with any data or aspects other than the plugin, particularly if it's a production version of the site. Also, please be aware that we prioritize your privacy and, as such, refrain from providing login data to third parties. 

    Feel free to share the credentials here, ensuring you mark the response as PRIVATE so that only our team can access them.

    Kind Regards, 

    Aleksandar Vuković
    [email protected]

    Rate my support

    wpDataTables: FAQ | Facebook | Twitter | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia demo sites | Docs | Discord Community

    You can try wpDataTables add-ons before purchasing on these sandbox sites:

    Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables

  • John replied

    Hi Aleksandar,

    Thanks for the reply. We are building a site for a client and opening the website to a third party at this time, is not what they would want. There are some other ways to test this other than a live or development site as I'm sure you know. Would it not be possible to do that and let us know the results? (I can recommend  bitnami's wordpress offering. I am using it to test plugins, themes, etc on my Mac) .In the meantime, we have had to work around the problem by developing our own solution to the missing functionality.  This is not our first preference as we want to use wpDatatables in other applications which have similar requirements.

    On the topic of missing functionality - Regular Expression (REGEX). It looks like wpDatatables is missing that capability (or we haven't found out how to do it). It's an old problem but it seems not to have been implemented. Is there some way we can implement it? We need to be able to find entries based on the first letter in a name. (A or B or C, etc). We know the syntax and how to use SQL to achieve the result we want, but we just don't know how to use it in a filter using wpDatatables.

    Thanks,

    John

  •  2,499
    Aleksandar replied

    Hey John.

    You can create a staging website that would be a duplicate of the site in question, and then share the credentials for that staging site with me. I'll take a look, but I can't promise anything.

    As for REGEX, I forwarded the question to our developers and I'll get back to you when I hear from them.

    Kind Regards, 

    Aleksandar Vuković
    [email protected]

    Rate my support

    wpDataTables: FAQ | Facebook | Twitter | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia demo sites | Docs | Discord Community

    You can try wpDataTables add-ons before purchasing on these sandbox sites:

    Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables