Does Appdrag support any copyright awareness that shields theft attempts from downloading or sharing images on my website? I have watermarks on my pictures but if someone would want to retrieve my images they could just crop the watermark portion out.

@joseph-benguira Thanks for the link. Does it enable multiple people to simultaneously work on a single project. For example each person edits his or her own copy of their CSS source block and chooses when to share those changes with the rest of the team. Thus, temporary or partial edits by one person do not interfere with another person's work.

I working on a project with my team and every time something is published it overrides the changes of another team member's work, especially when working on the same page. It is frustrating because that person has to go back and make those changes again what were overwritten or work on a different page so it doesn't interfere other person work.

I'm building a filter feature for my website where it filters images depending on what category the user selects from a dropdown, checking checkboxes or inputting text. I created a database table and set up the right API functions to output my results. I binded my dynamic data source and added a Cloud Backend Inputs(Searchable List) and a gallery. I edit the gallery element and clicked on 'Data source Cloud Backend' checked 'enable' and selected 'Data source' from the dropdown.

I dragged a jQuery source code block and pasted my API documentation jQuery code.

<div class="appdrag-gallery" format="rectangle" columns="4" spacing="10" caption-position="full-image" caption-alignment="center" caption-background="rgba(48,76,224,0.56)" border-size="0" border-radius="0" opacity="0.92" text-color="rgba(237,237,237,1)"
    font-family="Montserrat" font-size="30" market-id="3698545" owner-id="1" style="display:block">
    <div class="appdrag-gallery-data" id="galleryData">
    </div>
    <div class="appdrag-gallery-view" id="galleryContainer"></div>
    <div class="clearfix">
    </div>
    </div>
    <script  appdrag-embed="true">
        //Wait for jquery to load before executing code
        addEventListener('JqueryLoaded', function(e) {

            // Pull the ID parameter from URL to place in API
            var url_string = window.location.href; // REFER TO IMAGE NOT PAGE?
            var url = new URL(url_string);
            var id = url.searchParams.get("id");

            // API call to fetch images from database
            var settings = {
                "url": "REPLACE_WITH_YOUR_API_URL", 
                "data": {
                    "id": id, 
                    "AD_PageNbr": "1",
                    "AD_PageSize": "500"
                },
                "method": "GET",
                "async": true,
                "crossDomain": true,
                "processData": true
            };
            $.ajax(settings).done(function(response) {

                // Check recieved Object
                var object = JSON.parse(response);
                if (object != null && object.Table != null && object.Table.length > 0 && object.Table[0].gallery != "") {
                    var images = JSON.parse(object.Table[0].gallery);
                    var pictureData = "";
                    var pictureView = "";

                    // Iterate through each image and create its own HTML block
                    $.each(images, function(idx, url) {
                        pictureData += '<div class="appdrag-gallery-data-elem" caption="" gallery-image="' + url + '" order-id="0"></div>';
                        pictureView += '<div class="col-sm-3 col-xs-12" style="padding:10px">\
                                <div class="appdrag-gallery-link" lightbox="' + url + '">\
                                    <div class="appdrag-gallery-elem" caption="" gallery-image="' + url + '" order-id="0" style="border-style:none;border-width:0;border-radius:0;opacity:.92;border-color:#ccc">\
                                        <div class="appdrag-gallery-image appdrag-gallery-image-rectangle" style="background-image:url(\'' + url + '\')">\
                                            <div class="appdrag-gallery-caption au-center appdrag-gallery-caption-full-image" style="font-family:Montserrat;font-size:30px;background-color:rgba(48,76,224,.56);color:#ededed">\
                                                <span style="display:inline-block;vertical-align:middle"></span>\
                                            </div>\
                                        </div>\
                                    </div>\
                                </div>\
                            </div>';
                    })

                    // Call the containers by their IDs and append the image blocks
                    $("#galleryData").append(pictureData);
                    $("#galleryContainer").append(pictureView);
                    resetLightbox(); //re-init lightbox for all generated images
                }
            });
        }, false);
    </script>

I followed this tutorial what I have mentioned above

Here is where I got stuck.

I know that I have to iterate through each image so it can populate the gallery once I make a selection from the searchable list(dropdown). How would I bind the searchable list, gallery and database properly? In the searchable list edit element would I click on 'Data source Cloud Backend' or would I click on 'Triggers ->Cloud Backend' What is the different between these two options?

Also would the process look the same binding checkboxes and text inputs with the database

Any screenshots, code snippets, or guidance would be appreciated.