Streaming live at 10am (PST)

Populating Lightbox from database?


#1

Hi everyone,

I've been enjoying playing around with the new lightbox feature.

I am trying to populate the lightbox image set from a database using PHP + MYSQL.

Has anyone has any successes with this?


#2

Hi Garsen, would like to know if you are using a CMS with your php. For me, I use Adobe Business Catalyst CMS-Online business solution. We have a feature in BC called web app. In which we have list view, detail view and custom view layouts. I have not tested webflow with the lightbox, but from my knowledge of how webflow is perfectly structured. It would be nice if all your image are spit out from the database via list, tag with each image assigned a unique id. Then, export the code out of webflow. If you have laid multiple images in your design with webflow for the lightbox, e.g three images, remove the codes running the other images and you would be left with one. Attach an itemID with the class name you used for image in webflow. Something like this:


#3

Hi Topelovey,

Thanks for the input.

I'm building an web app from the ground up so no CMS. I'm using webflow to do the heavy lifting for me with regards to responsiveness.

In my case i'd like to be able to loop the webflow lightbox something like:

{
"url": "',$phpvariable,'",
                      "caption": ""
        },

I'm able to do this with Fancybox but then I need to do all the heavy lifting on the responsive side.


#4

Ok so I got it to work but know I have a follow up query.

<?php

            $getlightboximages = "SELECT SQL";
            $getimagesquery = mysqli_query($con, XXX);
            $counter = 0;
            $getfirstimage = "select";
            $getfirstquery = mysqli_query($con, XXXX);;
            $firstimage = mysqli_fetch_array($getfirstquery, MYSQLI_BOTH);


              echo '<a class="w-lightbox w-inline-block light-box" href="#">
              <img src="',$firstimage['0'],'" alt="">
              <script type="application/json" class="w-json">
                {
                  "images": [';

                  while ($reviewimages = mysqli_fetch_array($getimagesquery))

                    {

                      if ($counter > 0) {
                         echo ",";
                     }

                    echo '{
                      "url": "',$reviewimages['Image'],'",
                      "caption": ""
                    }';  
                    $counter++;

                   }



                  echo ']
                }
              </script>
            </a>';


            ?>

So thats great if I only want to show lets say 10 images in a lightbox. But if I want to show all the images in a gallery I am obviously going to have to use some AJAX to pull let say a set of 10 images at a 10 and then to display them.

Any ideas on how to get that done using the weflow code set?


#5

I'm looking to do something similar...load a grid page of images in webflow from a mysql/php database. Did you make any progress? Thanks.


#6