Results 1 to 4 of 4

Thread: Images on webpage not loading corredctly?

  1. #1

    Thread Starter
    PowerPoster
    Join Date
    Jan 2004
    Location
    Southern California
    Posts
    5,034

    Images on webpage not loading corredctly?

    I'm loading a bunch of images on a webpage with 4 images across the page and then down based on CSS rules. However, at a certain point, the images stop loading the way they are suppose to. Not sure what is causing that. All the images are the same size. See attached screenshot and my code below.

    Code:
    <!DOCTYPE html>
    <html>
    
    <head>
        <title>PHOTOGRAPHY - Portfolio</title>
    
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    
        <style>
            img {
                border: 7px solid #fff;
                margin-right: 15px;
                margin-top: 15px;
                margin-top: 15px;
                border-top-right-radius: 4px;
                border-top-left-radius: 4px;
            }
            
            .images {
                width: 310px;
                float: left;
                display: block;
                text-align: center;
                margin-top: -30px;
                margin-left: auto;
                margin-right: 40px;
            }
    
            .images a {
                float: left;
                margin: 25px 10px;
            }
    
            .images a:hover {
                -webkit-transform: scale(1.05);
                -ms-transform: scale(1.05);
                transform: scale(1.05);
                transition: transform 0.4s;
            }
    
            #container1 {
                width: 100%;
                height: 100vh;
                margin: 20px 0;
                display: inline-block;
                background-color: #111;
                border-top: 1px solid transparent;
            }
    
            .caption {
                height: 35px;
                width: 324px;
                margin-top: -3px;
                background-color: #fff;
                border-bottom-left-radius: 4px;
                border-bottom-right-radius: 4px;
            }
        </style>
    </head>
    
    <body onload="getImages('Portfolio/Landscapes/'); disableRightClick()">
    <!--    <div style="width: 95%; margin: 0 auto; padding-top: 10px; border-bottom: 2px solid #ccc; height: 40px">-->
        <div style="width: 96%; margin-left: 1%; padding-top: 10px; border-bottom: 2px solid #ccc; height: 40px">
            <p style="color: #fff; font-family: 'Arial Narrow'; text-align: right; margin-right: 20px; float: right; margin-top: 6px; margin-left: 10px">Cart:&nbsp;&nbsp;</p>
            <a href=""><p class="button">Checkout</p></a>
        </div>
    
        <div id="container1" style="margin-left: 24px"></div>
    </body>
    
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    
    <script>
        function getImages(dirLocation) {
            var dir = dirLocation;
            var fileextension = "jpg";
            var x = 1;
    
            $.ajax({
                //This will retrieve the contents of the folder if the folder is configured as 'browsable'
                url: dir,
    
                success: function(data) {
                    //This empty() statement clears the canvas so a new directory can be reloaded
                    $("#container1").empty();
    
                    //List all png file names in the page
                    $(data).find("a:contains(" + fileextension + ")").each(function() {
                        var pathName = this.href;
                        var strLen = pathName.lastIndexOf('/');
                        var fileName = pathName.substring(pathName.lastIndexOf('/') + 1);
                        var newFileName = pathName.slice(0, strLen, pathName) + "/" + dir + fileName;
                        var fileName2 = fileName.split('.', 1);
                        var onclick = 'showImage("' + pathName + '");';
    
                        var div = "<div class='images'>" +
                            "<a href=''><img id='" + fileName2 + "' onclick='" + onclick + " placeMark(x,'" + newFileName + "')' src='" + pathName + "' width='310' height='auto'>" +
                            "<div class='caption'>" +
                            "<form target='paypal' style='margin-left: 25px' action='https: //www.paypal.com/cgi-bin/webscr' method='post'>" +
                            "<input type='hidden' name='cmd' value = '_s-xclick'>" +
                            "<input type='hidden' name='encrypted'" +
                            "value='-----BEGIN PKCS7-----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-----END PKCS7-----'>" +
                            "<input type='image' src='https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif' border='0' name='submit' alt='PayPal - The safer, easier way to pay online!'>" +
                            "<img alt='' border='0' src='https://www.paypalobjects.com/en_US/i/scr/pixel.gif' width='1' height='1'>" +
                            "</form></div></a></div>";
                        $("#container1").append($(div));
                        x++;
                    });
                }
            });
        }
        //
        //
        //
        function placeMark(i, newFileName) {
            alert('placeMark()');
            
            watermark([newFileName, 'Images/BMPhotography.png'])
                .image(watermark.image.lowerRight())
                .then(function(img) {
                    var container = document.getElementById('image-' + (i + 1));
                    container.appendChild(img);
                });
        }
        //
        //
        //
        function disableRightClick() {
            document.addEventListener('contextmenu', event => event.preventDefault());
        }
        //
        //
        //
        function showImage(fileName2) {
            var largeImage = document.getElementById(fileName2);
            largeImage.style.display = 'block';
            largeImage.style.width = 700 + "px";
            largeImage.style.height = "auto";
            var url = largeImage.getAttribute('src');
            window.addEventListener('contextmenu', event => event.preventDefault());
            window.open(url, '', '', 'width=largeImage.stylewidth, height=largeImage.style.height, resizable=1', onclick = 'disableRightClick()');
        }
    
    </script>
    
    </html>
    Attached Images Attached Images  
    Last edited by blakemckenna; Aug 15th, 2020 at 03:30 PM.
    Blake

  2. #2

    Thread Starter
    PowerPoster
    Join Date
    Jan 2004
    Location
    Southern California
    Posts
    5,034

    Re: Images on webpage not loading corredctly?

    Anyone have any ideas?
    Blake

  3. #3
    New Member
    Join Date
    Jul 2020
    Posts
    9

    Re: Images on webpage not loading corredctly?

    I will suggest you attached a file showing the result you are expecting just as you attached the unexpected result. Only then can someone know how to play around it.

  4. #4

    Thread Starter
    PowerPoster
    Join Date
    Jan 2004
    Location
    Southern California
    Posts
    5,034

    Re: Images on webpage not loading corredctly?

    It's pretty simple. You see a row of 4 images? Every row should contains 4 images with NO gaps.
    Blake

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width