Make my html image gallery piece together like a collage [closed]

I need to make the images in my html image gallery fit and piece together like a collage

Hi,

I’m trying to make this an all-round well written question. I will provide the code files (although the css and js are huge) and the link to the page with the issue, provide any further info that anybody needs to assist me and try to explain the question clearly through this paragraph:

I am doing a lightbox image gallery on my website on a page devoted to testing this gallery before it is published. At the moment, all images are set to 200 x 200 px. This makes them all sit uniform and together – however, some pictures have a longer length and a smaller width (portrait ways) so will need to be a larger size. I would like the pictures on the row below the image that needs to be longer to slot and fit around the image in a collage style. At the moment, the entire row below the image just sits lower.

Issue 2 – why are some of the images huge when you click into them and some small? Do you have suggestions for a good site to use that pixel resizes them?

The image I have tried to experiment with being longer is "blue-reflections.png"

PAGE LINK

Please be aware it will take up to 15 seconds to load the entire page but the fancy loading gif makes that time feel way shorter 🙂

rogersartwork.co.uk/gallerytesting/gallery.html

HTML (including a small CSS File)

<html>     <head>         <title>Gallery</title>         <meta name="viewport" content="width=device-width, initial-scale=1">         <link rel="stylesheet" type="text/css" href="lightbox.min.css">         <script src="lightbox-plus-jquery.min.js"></script>     </head>     <body>         <div id="loading">             <p id="loading-message">Gallery Loading...</p>             <p id="loading-message">This page takes longer to load the first time you view it.</p>             <img id="loading-gif" src="/images/loading.gif"/>         </div>         <div class="gallery">             <a href="/gallery_files/abstract-1.png" data-lightbox="mygallery" data-title="Abstract 1"><img class="gallery-image" src="/gallery_files/abstract-1.png"/></a>             <a href="/gallery_files/abstract-2.png" data-lightbox="mygallery" data-title="Abstract 2"><img class="gallery-image" src="/gallery_files/abstract-2.png"/></a>             <a href="/gallery_files/abstract-3.png" data-lightbox="mygallery" data-title="Abstract 3"><img class="gallery-image" src="/gallery_files/abstract-3.png"/></a>             <a href="/gallery_files/a-pair-of-pears.png" data-lightbox="mygallery" data-title="A Pair of Pears"><img class="gallery-image" src="/gallery_files/a-pair-of-pears.png"/></a>             <a href="/gallery_files/attracted-to-the-light.png" data-lightbox="mygallery" data-title="Attracted to the Light"><img class="gallery-image" src="/gallery_files/attracted-to-the-light.png"/></a>             <a href="/gallery_files/blossoms-in-the-wind.png" data-lightbox="mygallery" data-title="Blossoms in the Wind"><img class="gallery-image" src="/gallery_files/blossoms-in-the-wind.png"/></a>             <a href="/gallery_files/blue-abstract.png" data-lightbox="mygallery" data-title="Blue Abstract"><img class="gallery-image" src="/gallery_files/blue-abstract.png"/></a>             <a href="/gallery_files/blue-mermaid.png" data-lightbox="mygallery" data-title="Blue Mermaid"><img class="gallery-image" src="/gallery_files/blue-mermaid.png"/></a>             <a href="/gallery_files/blue-poppies.png" data-lightbox="mygallery" data-title="Blue Poppies"><img class="gallery-image" src="/gallery_files/blue-poppies.png"/></a>             <a href="/gallery_files/blue-reflection.png" data-lightbox="mygallery" data-title="Blue Reflection"><img src="/gallery_files/blue-reflection.png" height=380px width=180px/></a>             <a href="/gallery_files/bubbles-3.png" data-lightbox="mygallery" data-title="Bubbles 3"><img class="gallery-image" src="/gallery_files/bubbles-3.png"/></a>             <a href="/gallery_files/candy-floss.png" data-lightbox="mygallery" data-title="Candy Floss"><img class="gallery-image" src="/gallery_files/candy-floss.png"/></a>             <a href="/gallery_files/catch-of-the-day.png" data-lightbox="mygallery" data-title="Catch of the Day"><img class="gallery-image" src="/gallery_files/catch-of-the-day.png"/></a>             <a href="/gallery_files/champagne-bubbles.png" data-lightbox="mygallery" data-title="Champagne Bubbles"><img class="gallery-image" src="/gallery_files/champagne-bubbles.png"/></a>             <a href="/gallery_files/chinese-bridge.png" data-lightbox="mygallery" data-title="Chinese Bridge"><img class="gallery-image" src="/gallery_files/chinese-bridge.png"/></a>             <a href="/gallery_files/christmas-eve.png" data-lightbox="mygallery" data-title="Christmas Eve"><img class="gallery-image" src="/gallery_files/christmas-eve.png"/></a>             <a href="/gallery_files/cocktail.png" data-lightbox="mygallery" data-title="Cocktail"><img class="gallery-image" src="/gallery_files/cocktail.png"/></a>             <a href="/gallery_files/copper-and-gold.png" data-lightbox="mygallery" data-title="Copper and Gold"><img class="gallery-image" src="/gallery_files/copper-and-gold.png"/></a>             <a href="/gallery_files/crystal-rain.png" data-lightbox="mygallery" data-title="Crystal Rain"><img class="gallery-image" src="/gallery_files/crystal-rain.png"/></a>             <a href="/gallery_files/daisies.png" data-lightbox="mygallery" data-title="Daisies"><img class="gallery-image" src="/gallery_files/daisies.png"/></a>             <a href="/gallery_files/deco.png" data-lightbox="mygallery" data-title="Deco"><img class="gallery-image" src="/gallery_files/deco.png"/></a>             <a href="/gallery_files/deco-gold.png" data-lightbox="mygallery" data-title="Deco Gold"><img class="gallery-image" src="/gallery_files/deco-gold.png"/></a>             <a href="/gallery_files/deco-window.png" data-lightbox="mygallery" data-title="Deco Window"><img class="gallery-image" src="/gallery_files/deco-window.png"/></a>             <a href="/gallery_files/disappearing-mermaid.png" data-lightbox="mygallery" data-title="Disappearing Mermaid"><img class="gallery-image" src="/gallery_files/disappearing-mermaid.png"/></a>             <a href="/gallery_files/down-in-the-dell.png" data-lightbox="mygallery" data-title="Down in the Dell"><img class="gallery-image" src="/gallery_files/down-in-the-dell.png"/></a>             <a href="/gallery_files/dragon.png" data-lightbox="mygallery" data-title="Dragon"><img class="gallery-image" src="/gallery_files/dragon.png"/></a>             <a href="/gallery_files/dragon-2.png" data-lightbox="mygallery" data-title="Dragon 2"><img class="gallery-image" src="/gallery_files/dragon-2.png"/></a>             <a href="/gallery_files/dragons-breath.png" data-lightbox="mygallery" data-title="Dragon's Breath"><img class="gallery-image" src="/gallery_files/dragons-breath.png"/></a>             <a href="/gallery_files/dragons-eye.png" data-lightbox="mygallery" data-title="Dragon's Eye"><img class="gallery-image" src="/gallery_files/dragons-eye.png"/></a>             <a href="/gallery_files/dream-catcher.png" data-lightbox="mygallery" data-title="Dream Catcher"><img class="gallery-image" src="/gallery_files/dream-catcher.png"/></a>             <a href="/gallery_files/ebb-tide.png" data-lightbox="mygallery" data-title="Ebb Tide"><img class="gallery-image" src="/gallery_files/ebb-tide.png"/></a>             <a href="/gallery_files/fairies-dell.png" data-lightbox="mygallery" data-title="Fairies Dell"><img class="gallery-image" src="/gallery_files/fairies-dell.png"/></a>             <a href="/gallery_files/fire-and-ice.png" data-lightbox="mygallery" data-title="Fire and Ice"><img class="gallery-image" src="/gallery_files/fire-and-ice.png"/></a>             <a href="/gallery_files/flames.png" data-lightbox="mygallery" data-title="Flames"><img class="gallery-image" src="/gallery_files/flames.png"/></a>             <a href="/gallery_files/flowers.png" data-lightbox="mygallery" data-title="Flowers"><img class="gallery-image" src="/gallery_files/flowers.png"/></a>             <a href="/gallery_files/flying-a-kite.png" data-lightbox="mygallery" data-title="Flying A Kite"><img class="gallery-image" src="/gallery_files/flying-a-kite.png"/></a>             <a href="/gallery_files/girl-blowing-bubbles.png" data-lightbox="mygallery" data-title="Girl Blowing Bubbles"><img class="gallery-image" src="/gallery_files/girl-blowing-bubbles.png"/></a>             <a href="/gallery_files/girl-with-blue-umbrella.png" data-lightbox="mygallery" data-title="Girl with Blue Umbrella"><img class="gallery-image" src="/gallery_files/girl-with-blue-umbrella.png"/></a>             <a href="/gallery_files/girl-with-rainbow-umbrella.png" data-lightbox="mygallery" data-title="Girl with Rainbow Umbrella"><img class="gallery-image" src="/gallery_files/girl-with-rainbow-umbrella.png"/></a>             <a href="/gallery_files/go-away-rain.png" data-lightbox="mygallery" data-title="Go Away Rain"><img class="gallery-image" src="/gallery_files/go-away-rain.png"/></a>             <a href="/gallery_files/golden-rain.png" data-lightbox="mygallery" data-title="Golden Rain"><img class="gallery-image" src="/gallery_files/golden-rain.png"/></a>             <a href="/gallery_files/green-reflections.png" data-lightbox="mygallery" data-title="Green Reflections"><img class="gallery-image" src="/gallery_files/green-reflections.png"/></a>             <a href="/gallery_files/icicles.png" data-lightbox="mygallery" data-title="Icicles"><img class="gallery-image" src="/gallery_files/icicles.png"/></a>             <a href="/gallery_files/jaws.png" data-lightbox="mygallery" data-title="Jaws"><img class="gallery-image" src="/gallery_files/jaws.png"/></a>             <a href="/gallery_files/jellyfish-2.png" data-lightbox="mygallery" data-title="Jellyfish 2"><img class="gallery-image" src="/gallery_files/jellyfish-2.png"/></a>             <a href="/gallery_files/jellyfish-rising.png" data-lightbox="mygallery" data-title="Jellyfish Rising"><img class="gallery-image" src="/gallery_files/jellyfish-rising.png"/></a>             <a href="/gallery_files/jewels.png" data-lightbox="mygallery" data-title="Jewels"><img class="gallery-image" src="/gallery_files/jewels.png"/></a>             <a href="/gallery_files/kaleidoscope.png" data-lightbox="mygallery" data-title="Kaleidoscope"><img class="gallery-image" src="/gallery_files/kaleidoscope.png"/></a>             <a href="/gallery_files/kingfisher.png" data-lightbox="mygallery" data-title="Kingfisher"><img class="gallery-image" src="/gallery_files/kingfisher.png"/></a>             <a href="/gallery_files/lady-with-blue-hair.png" data-lightbox="mygallery" data-title="Lady with Blue Hair"><img class="gallery-image" src="/gallery_files/lady-with-blue-hair.png"/></a>             <a href="/gallery_files/lava-explosion.png" data-lightbox="mygallery" data-title="Lava Explosion"><img class="gallery-image" src="/gallery_files/lava-explosion.png"/></a>             <a href="/gallery_files/lava-flow.png" data-lightbox="mygallery" data-title="Lava Flow"><img class="gallery-image" src="/gallery_files/lava-flow.png"/></a>             <a href="/gallery_files/lightning-strike.png" data-lightbox="mygallery" data-title="Lightning Strike"><img class="gallery-image" src="/gallery_files/lightning-strike.png"/></a>             <a href="/gallery_files/lions-eye.png" data-lightbox="mygallery" data-title="Lion's Eye"><img class="gallery-image" src="/gallery_files/lions-eye.png"/></a>             <a href="/gallery_files/love-in-the-mist.png" data-lightbox="mygallery" data-title="Love in the Mist"><img class="gallery-image" src="/gallery_files/love-in-the-mist.png"/></a>             <a href="/gallery_files/mermaid-arising.png" data-lightbox="mygallery" data-title="Mermaid Arising"><img class="gallery-image" src="/gallery_files/mermaid-arising.png"/></a>             <a href="/gallery_files/midnight-forest.png" data-lightbox="mygallery" data-title="Midnight Forest"><img class="gallery-image" src="/gallery_files/midnight-forest.png"/></a>             <a href="/gallery_files/moonlight-rays.png" data-lightbox="mygallery" data-title="Moonlight Rays"><img class="gallery-image" src="/gallery_files/moonlight-rays.png"/></a>             <a href="/gallery_files/moon-walking.png" data-lightbox="mygallery" data-title="Moon Walking"><img class="gallery-image" src="/gallery_files/moon-walking.png"/></a>             <a href="/gallery_files/mountains.png" data-lightbox="mygallery" data-title="Mountains"><img class="gallery-image" src="/gallery_files/mountains.png"/></a>             <a href="/gallery_files/mountains-2.png" data-lightbox="mygallery" data-title="Mountains 2"><img class="gallery-image" src="/gallery_files/mountains-2.png"/></a>             <a href="/gallery_files/mountain-scape.png" data-lightbox="mygallery" data-title="Mountain Scape"><img class="gallery-image" src="/gallery_files/mountain-scape.png"/></a>             <a href="/gallery_files/new-york.png" data-lightbox="mygallery" data-title="New York"><img class="gallery-image" src="/gallery_files/new-york.png"/></a>             <a href="/gallery_files/norfolk-broads.png" data-lightbox="mygallery" data-title="Norfolk Broads"><img class="gallery-image" src="/gallery_files/norfolk-broads.png"/></a>             <a href="/gallery_files/northern-lights.png" data-lightbox="mygallery" data-title="Northern Lights"><img class="gallery-image" src="/gallery_files/northern-lights.png"/></a>             <a href="/gallery_files/octopuses-treasure.png" data-lightbox="mygallery" data-title="Octopuses Treasure"><img class="gallery-image" src="/gallery_files/octopuses-treasure.png"/></a>             <a href="/gallery_files/on-reflection.png" data-lightbox="mygallery" data-title="On Reflection"><img class="gallery-image" src="/gallery_files/on-reflection.png"/></a>             <a href="/gallery_files/palm-trees.png" data-lightbox="mygallery" data-title="Palm Trees"><img class="gallery-image" src="/gallery_files/palm-trees.png"/></a>             <a href="/gallery_files/pencils.png" data-lightbox="mygallery" data-title="Pencils"><img class="gallery-image" src="/gallery_files/pencils.png"/></a>             <a href="/gallery_files/peppers.png" data-lightbox="mygallery" data-title="Peppers"><img class="gallery-image" src="/gallery_files/peppers.png"/></a>             <a href="/gallery_files/pond-life.png" data-lightbox="mygallery" data-title="Pond Life"><img class="gallery-image" src="/gallery_files/pond-life.png"/></a>             <a href="/gallery_files/poppies.png" data-lightbox="mygallery" data-title="Poppies"><img class="gallery-image" src="/gallery_files/poppies.png"/></a>             <a href="/gallery_files/psychedelic-hurricane.png" data-lightbox="mygallery" data-title="Psychedelic Hurricane"><img class="gallery-image" src="/gallery_files/psychedelic-hurricane.png"/></a>             <a href="/gallery_files/purple-fantasy.png" data-lightbox="mygallery" data-title="Purple Fantasy"><img class="gallery-image" src="/gallery_files/purple-fantasy.png"/></a>             <a href="/gallery_files/purple-reflections.png" data-lightbox="mygallery" data-title="Purple Reflections"><img class="gallery-image" src="/gallery_files/purple-reflections.png"/></a>             <a href="/gallery_files/red-abstract.png" data-lightbox="mygallery" data-title="Red Abstract"><img class="gallery-image" src="/gallery_files/red-abstract.png"/></a>             <a href="/gallery_files/red-rain.png" data-lightbox="mygallery" data-title="Red Rain"><img class="gallery-image" src="/gallery_files/red-rain.png"/></a>             <a href="/gallery_files/red-sands.png" data-lightbox="mygallery" data-title="Red Sands"><img class="gallery-image" src="/gallery_files/red-sands.png"/></a>             <a href="/gallery_files/redwood-forest.png" data-lightbox="mygallery" data-title="Redwood Forest"><img class="gallery-image" src="/gallery_files/redwood-forest.png"/></a>             <a href="/gallery_files/rockpool.png" data-lightbox="mygallery" data-title="Rockpool"><img class="gallery-image" src="/gallery_files/rockpool.png"/></a>             <a href="/gallery_files/roman-bridge.png" data-lightbox="mygallery" data-title="Roman Bridge"><img class="gallery-image" src="/gallery_files/roman-bridge.png"/></a>             <a href="/gallery_files/rose.png" data-lightbox="mygallery" data-title="Rose"><img class="gallery-image" src="/gallery_files/rose.png"/></a>             <a href="/gallery_files/rose-petals.png" data-lightbox="mygallery" data-title="Rose Petals"><img class="gallery-image" src="/gallery_files/rose-petals.png"/></a>             <a href="/gallery_files/roxanne.png" data-lightbox="mygallery" data-title="Roxanne"><img class="gallery-image" src="/gallery_files/roxanne.png"/></a>             <a href="/gallery_files/seascape-abstract.png" data-lightbox="mygallery" data-title="Seascape Abstract"><img class="gallery-image" src="/gallery_files/seascape-abstract.png"/></a>             <a href="/gallery_files/seascape-at-night.png" data-lightbox="mygallery" data-title="Seascape at Night"><img class="gallery-image" src="/gallery_files/seascape-at-night.png"/></a>             <a href="/gallery_files/sea-spray.png" data-lightbox="mygallery" data-title="Sea Spray"><img class="gallery-image" src="/gallery_files/sea-spray.png"/></a>             <a href="/gallery_files/seaweed.png" data-lightbox="mygallery" data-title="Seaweed"><img class="gallery-image" src="/gallery_files/seaweed.png"/></a>             <a href="/gallery_files/shoal.png" data-lightbox="mygallery" data-title="Shoal"><img class="gallery-image" src="/gallery_files/shoal.png"/></a>             <a href="/gallery_files/shoal-of-fish.png" data-lightbox="mygallery" data-title="Shoal of Fish"><img class="gallery-image" src="/gallery_files/shoal-of-fish.png"/></a>             <a href="/gallery_files/snowy-mountains.png" data-lightbox="mygallery" data-title="Snowy Mountains"><img class="gallery-image" src="/gallery_files/snowy-mountains.png"/></a>             <a href="/gallery_files/squid.png" data-lightbox="mygallery" data-title="Squid"><img class="gallery-image" src="/gallery_files/squid.png"/></a>             <a href="/gallery_files/still-life-with-jugs.png" data-lightbox="mygallery" data-title="Still Life with Jugs"><img class="gallery-image" src="/gallery_files/still-life-with-jugs.png"/></a>             <a href="/gallery_files/still-life-with-pear.png" data-lightbox="mygallery" data-title="Still Life with Pear"><img class="gallery-image" src="/gallery_files/still-life-with-pear.png"/></a>             <a href="/gallery_files/sunset.png" data-lightbox="mygallery" data-title="Sunset"><img class="gallery-image" src="/gallery_files/sunset.png"/></a>             <a href="/gallery_files/sunset-in-paradise.png" data-lightbox="mygallery" data-title="Sunset in Paradise"><img class="gallery-image" src="/gallery_files/sunset-in-paradise.png"/></a>             <a href="/gallery_files/the-jellyfish.png" data-lightbox="mygallery" data-title="The Jellyfish"><img class="gallery-image" src="/gallery_files/the-jellyfish.png"/></a>             <a href="/gallery_files/the-kiss.png" data-lightbox="mygallery" data-title="The Kiss"><img class="gallery-image" src="/gallery_files/the-kiss.png"/></a>             <a href="/gallery_files/the-night-before-christmas.png" data-lightbox="mygallery" data-title="The Night Before Christmas"><img class="gallery-image" src="/gallery_files/the-night-before-christmas.png"/></a>             <a href="/gallery_files/the-partys-over.png" data-lightbox="mygallery" data-title="The Party's Over"><img class="gallery-image" src="/gallery_files/the-partys-over.png"/></a>             <a href="/gallery_files/the-reef.png" data-lightbox="mygallery" data-title="The Reef"><img class="gallery-image" src="/gallery_files/the-reef.png"/></a>             <a href="/gallery_files/the-returning-turtles.png" data-lightbox="mygallery" data-title="The Returning Turtles"><img class="gallery-image" src="/gallery_files/the-returning-turtles.png"/></a>             <a href="/gallery_files/the-wave.png" data-lightbox="mygallery" data-title="The Wave"><img class="gallery-image" src="/gallery_files/the-wave.png"/></a>             <a href="/gallery_files/tropical-fish-tank.png" data-lightbox="mygallery" data-title="Tropical Fish Tank"><img class="gallery-image" src="/gallery_files/tropical-fish-tank.png"/></a>             <a href="/gallery_files/tulips.png" data-lightbox="mygallery" data-title="Tulips"><img class="gallery-image" src="/gallery_files/tulips.png"/></a>             <a href="/gallery_files/turquoise-and-brown.png" data-lightbox="mygallery" data-title="Turquoise and Brown"><img class="gallery-image" src="/gallery_files/turquoise-and-brown.png"/></a>             <a href="/gallery_files/waves.png" data-lightbox="mygallery" data-title="Waves"><img class="gallery-image" src="/gallery_files/waves.png"/></a>             <a href="/gallery_files/woodland.png" data-lightbox="mygallery" data-title="Woodland"><img class="gallery-image" src="/gallery_files/woodland.png"/></a>             <a href="/gallery_files/yachts-in-the-mist.png" data-lightbox="mygallery" data-title="Yachts in the Mist"><img class="gallery-image" src="/gallery_files/yachts-in-the-mist.png"/></a>             <a href="/gallery_files/yellow-umbrella.png" data-lightbox="mygallery" data-title="Yellow Umbrella"><img class="gallery-image" src="/gallery_files/yellow-umbrella.png"/></a>                                                                                                                 </div>         <script>             window.addEventListener("load", function(args){             window.setTimeout(function(){             document.getElementById("loading").style.display = "none";     }, 2000); });         </script>     </body>                                    </html>  <style> @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');     /*------------------CSS STARTS HERE------------------*/     .gallery-image {         height: 200px;         width: 200px;         transition: 1s;         padding: 10px;     }          .gallery-image:hover {         transform: scale(1.1);              }          .gallery {         margin: 10px 10px;     }               html {         background-color: #eeeeee;     }      #loading {    width: 100%;    height: 100%;    top: 0px;    left: 0px;    position: fixed;    display: block;    opacity: 0.7;    background-color: #16141c;    z-index: 99; }     #loading-gif {     top: 30%;   left: 40%;   position: absolute;   z-index: 100; }     #loading-message {         font-family: Open Sans;         font-size: 20pt;         color: white;         text-align: center;         padding-top: 40px;     }          .lb-caption {         font-family: Open Sans;         font-size: 30pt;     }   </style> 

Large main gallery CSS file

.lb-loader,.lightbox{text-align:center;line-height:0;position:absolute;left:0}body.lb-disable-scrolling{overflow:hidden}.lightboxOverlay{position:absolute;top:0;left:0;z-index:9999;background-color:#000;filter:alpha(Opacity=80);opacity:.8;display:none}.lightbox{width:100%;z-index:10000;font-weight:400;outline:0}.lightbox .lb-image{display:block;height:auto;max-width:inherit;max-height:none;border-radius:3px;border:4px solid #fff}.lightbox a img{border:none}.lb-outerContainer{position:relative;width:250px;height:250px;margin:0 auto;border-radius:4px;background-color:#fff}.lb-outerContainer:after{content:"";display:table;clear:both}.lb-loader{top:43%;height:25%;width:100%}.lb-cancel{display:block;width:32px;height:32px;margin:0 auto;background:url(/images/gallery-loading.gif) no-repeat}.lb-nav{position:absolute;top:0;left:0;height:100%;width:100%;z-index:10}.lb-container>.nav{left:0}.lb-nav a{outline:0;background-image:url(data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)}.lb-next,.lb-prev{height:100%;cursor:pointer;display:block}.lb-nav a.lb-prev{width:34%;left:0;float:left;background:url(/images/prev.png) left 48% no-repeat;filter:alpha(Opacity=0);opacity:0;-webkit-transition:opacity .6s;-moz-transition:opacity .6s;-o-transition:opacity .6s;transition:opacity .6s}.lb-nav a.lb-prev:hover{filter:alpha(Opacity=100);opacity:1}.lb-nav a.lb-next{width:64%;right:0;float:right;background:url(/images/next.png) right 48% no-repeat;filter:alpha(Opacity=0);opacity:0;-webkit-transition:opacity .6s;-moz-transition:opacity .6s;-o-transition:opacity .6s;transition:opacity .6s}.lb-nav a.lb-next:hover{filter:alpha(Opacity=100);opacity:1}.lb-dataContainer{margin:0 auto;padding-top:5px;width:100%;border-bottom-left-radius:4px;border-bottom-right-radius:4px}.lb-dataContainer:after{content:"";display:table;clear:both}.lb-data{padding:0 4px;color:#ccc}.lb-data .lb-details{width:85%;float:left;text-align:left;line-height:1.1em}.lb-data .lb-caption{font-size:13px;font-weight:700;line-height:1em}.lb-data .lb-caption a{color:#4ae}.lb-data .lb-number{display:block;clear:left;padding-bottom:1em;font-size:12px;color:#999}.lb-data .lb-close{display:block;float:right;width:30px;height:30px;background:url(/images/close.png) top right no-repeat;text-align:right;outline:0;filter:alpha(Opacity=70);opacity:.7;-webkit-transition:opacity .2s;-moz-transition:opacity .2s;-o-transition:opacity .2s;transition:opacity .2s}.lb-data .lb-close:hover{cursor:pointer;filter:alpha(Opacity=100);opacity:1} 

There’s a huge JS file but stack won’t let me put that many characters in so the text file can be read here if you need it: JS FILE

Any more info required just let me know.

Thanks

All images on rogersartwork.co.uk © Roger Ricketts 2021

Lightbox? Gallery? Custom Popup Design

Hello, we love the feel of this site – https://www.entertainmentone.com/

We are looking to try to figure out what exactly is it that they are using on the home page, if you click on one of their projects, it pops up a full screen page with a background for that project and information/video…..it acts like a Lightbox but aren't lightboxes only for Images?

What are they using here and is there a WordPress Plugin that is similar to do this?

how to make my custom gallery work in wordpress

So am creating a custom theme in WordPress and looking to achieve this enter image description here

I was able to output my category but not too sure how to output the remaining information. As you can see from the image below for each category there is a recent blog post on the left and then other blog post in the same category on the right.

Below is my code please advise what am doing wrong.

<?php  global $  post;     $  args = array(        'posts_per_page' => 4,        'post_type'     => 'post',        'orderby' => 'ASC',                );                        $  query = new WP_Query($  args);             while($  query->have_posts()): $  query->the_post();             $  taxonomy = 'category';             $  term = wp_get_post_terms($  post->ID, $  taxonomy);             ?>                                                 <!-- Left Details Caption -->                                         <div class="col-xl-6 col-lg-12">                                             <div class="whats-news-single mb-40 mb-40">                                                 <div class="whates-img">                                                     <?php the_post_thumbnail('small');?>                                                 </div>                                                 <div class="whates-caption">                                                     <h4><a href="latest_news.html"><?php the_title();?></a></h4>                                                     <span>by <?php the_author();?>   -   <?php echo esc_html(get_the_date()); ?></span>                                                     <p><?php the_excerpt();?></p>                                                 </div>                                             </div>                                         </div>                                           <!-- Right single caption -->                                          <div class="col-xl-6 col-lg-12">                                             <div class="row">                                                 <!-- single -->                                                 <div class="col-xl-12 col-lg-6 col-md-6 col-sm-10">                                                     <div class="whats-right-single mb-20">                                                         <div class="whats-right-img">                                                         <?php the_post_thumbnail('small');?>                                                         </div>                                                         <div class="whats-right-cap">                                     <?php if ($  term && !is_wp_error($  term)) :?>                                         <?php foreach ($  term as $  serv_terms) :?>                                                             <span class="colorb"><?php echo $  serv_terms->name;?></span>                                         <?php endforeach; endif;?>                                                             <h4><a href="<?php the_permalink();?>"><?php the_title();?></a></h4>                                                             <p><?php echo esc_html(get_the_date()); ?></p>                                                          </div>                                                     </div>                                                 </div>                                                                                          </div>                                         </div>                          <?php endwhile; wp_reset_postdata();?> 

Creating responsive 3 x 3 gallery box

Hello I am trying to create a flex grid which has 3 by 3 image gallery which is responsive,

Currently this is going on a wordpress page and this is the code to my image using openseadragon.
So I need this image:

<div id="materials-0158" class="suarrmaterials-zoomable-image" style="height:460px; width:310px;" data-image="2020/05/DSC_0158-1.jpg"></div>

to appear three times next to each other and three on the bottom, I will update the images and add more image boxes once i get the correct…

Creating responsive 3 x 3 gallery box

How is it possible that a gallery doesn’t have attachment ids?

I have a function that looks at the attachment IDs from a normal gallery (let’s ignore Gutenberg galleries for now, they have a different structure altogether):

\get_post_gallery( 0, False );, this should give me an array that has the key ids containing all attachment IDs.

Now, if we are to import the following .xml file, the theme unit test data, we see that 2 posts are created, namely “Post Format: Gallery” and “Post Format: Gallery (Tiled)”, now, visually, they look the same in terms of what you think they’d do:

First gallery.

Second gallery

However, “Post Format: Gallery (Tiled)” is a Jetpack gallery (taken from the post’s code):

and “Post Format: Gallery” is a normal gallery:

I rely on the ids key being there for my function to work. What option am I missing here? It seems there is a way to create a gallery without having IDs provided.

As a side note, whenever I create a non-Gutenberg gallery, it actually works, the output I’m given for get_post_gallery is:

array(4) { ["link"]=> string(4) "none" ["size"]=> string(6) "medium" ["ids"]=> string(8) "33,32,31" ["src"]=> array(3) { [0]=> string(68) "http://127.0.0.1/wordpress/wp-content/uploads/2020/04/5--300x200.jpg" [1]=> string(68) "http://127.0.0.1/wordpress/wp-content/uploads/2020/04/7--300x200.jpg" [2]=> string(68) "http://127.0.0.1/wordpress/wp-content/uploads/2020/04/6--300x200.jpg" } }

There are ids. Am I dealing with a malformed xml file here?

Image Gallery photos aren’t cropping, even though they’re set to crop

Can someone help???

I know I’m uploading relatively high-res photos, and yet they’re still not filling the frames of the image gallery I’m creating in the post.

I’ve set the switch to “Crop” in the gallery setting, and still when I preview on the front end, they’re not filling the frames.

Is there a code or site-wide solution to this? I’m managing so many posts and it’s such a hassle to have to go into “image editor” and tweak individual photos when possible.

Thanks.

WordPress Theme Gallery Website

This website is made for WP themes shop, or just sharing with the community. So far there are 2 themes that can be downloaded on the web.

The idea for those who want to continue, by direct selling the themes or by giving free themes that can be easier to get traffic, then promote products related to themes and premium plugins from ThemeForest or other providers and get affiliate commissions, affiliate hosting, or selling web design services.

The sale includes:
– Main website
– 2 themes…

WordPress Theme Gallery Website

Tiled gallery not working, latest WordPress visual editor

I am trying to create a tiled gallery using the newest WordPress visual editor as such (this shows up in the editor):

1

But when previewing the site it looks like this:

enter image description here

where the image is super big. Here is the code in the inspector:

enter image description here

and here is what shows up in the code editor:

<!-- wp:jetpack/tiled-gallery {"className":"is-style-square","ids":[3521,3532,3531]} --> <div class="wp-block-jetpack-tiled-gallery aligncenter is-style-square"><div class="tiled-gallery__gallery"><div class="tiled-gallery__row columns-3"><div class="tiled-gallery__col"><figure class="tiled-gallery__item"><img alt="" data-height="2560" data-id="3521" data-link="http://159.89.234.37/pp/img_1100/" data-url="http://159.89.234.37/pp/wp-content/uploads/2019/12/IMG_1100-scaled.jpg" data-width="1920" src="https://i0.wp.com/159.89.234.37/pp/wp-content/uploads/2019/12/IMG_1100-scaled.jpg?resize=1920%2C1920"/></figure></div><div class="tiled-gallery__col"><figure class="tiled-gallery__item"><img alt="" data-height="2560" data-id="3532" data-link="http://159.89.234.37/pp/img_1079/" data-url="http://159.89.234.37/pp/wp-content/uploads/2019/12/IMG_1079-scaled.jpg" data-width="1920" src="https://i1.wp.com/159.89.234.37/pp/wp-content/uploads/2019/12/IMG_1079-scaled.jpg?resize=1920%2C1920"/></figure></div><div class="tiled-gallery__col"><figure class="tiled-gallery__item"><img alt="" data-height="1920" data-id="3531" data-link="http://159.89.234.37/pp/img_1080/" data-url="http://159.89.234.37/pp/wp-content/uploads/2019/12/IMG_1080-scaled.jpg" data-width="2560" src="https://i1.wp.com/159.89.234.37/pp/wp-content/uploads/2019/12/IMG_1080-scaled.jpg?resize=1920%2C1920"/></figure></div></div></div></div> <!-- /wp:jetpack/tiled-gallery --> 

Any ideas?

8 Years Old Blogger/WordPress Template Gallery Website

Why are you selling this site?
no time o update with my office work. This is 8 Years hard work result,

Previous Theme Sponsorship sold thread here

  1. https://forums.digitalpoint.com/thr…plate-high-download-business-7-links.2533206/
  2. https://forums.digitalpoint.com/thr…mplate-high-download-travel-7-linkss.2513460/…

8 Years Old Blogger/WordPress Template Gallery Website