Dot Product doesn’t behave like normal function

I am trying to slightly modify the Dot function by treating it like a usual function, but soon I notice something weird about it.

Suppose there is a set set = {λ}, and I want to force Dot[a, λ] (having two arguments) to just print out {a, λ}.

set = {λ};  Unprotect[Dot]; Clear[Dot] Dot[x_, λ_] := Module[{}, Print[{x, λ}]] /; MemberQ[set, λ] Unprotect[Dot];  (* test *) Dot[a, λ] Dot[a, b, λ]  

The two tests print out

{a,λ} 

and

{b, λ} {a.b, λ} 

respectively.

However, the same code for a different function Dott behave completly differently,

set = {λ}; Dott[x_, λ_] :=   Module[{}, Print[{x, λ}]] /; MemberQ[set, λ]  (* tests *) Dott[a, λ] Dott[a, a, λ] 

where the two tests print out {a,λ} and an unevaluated expression Dott[a, a, λ] respectively, and as expected.

I wonder what is going on under the hood (it appears that Dot is trying to exhaust all possible "two-factor product" given any number of dotted factors), and how to properly temper with the Dot product? (my ultimate goal is to adapt it for some non-commutative algebra).

Was I right to leave my rp group after feeling like my player agency was violated?

Everyone. I was apart of a discord RP group but I recently left after this incident. To give some background. I was being repeatedly belittled OOC by other members and was being made to walk on egg shells around everyone. I was already Abit on edge the whole time I had been apart of this group which was for around six months. So this event starts and we find this group of nineteen children who had survived a horrific attack. They end up being affected by some unknown disease so we are all in quarantine with them.

This whole time my Character gravitates to this one little girl and makes sure to dote on her. Several of the children including her are confirmed to be orphans. My character is in her 30’s and I thought I would be given the chance to adopt her. Well the GM barely rped as her because they could not handle dealing with multiple players and scenes very well. They give us permission to just npc the children to an extent because they can’t keep up. So I am just writting scene after scene the whole time of cuteness. I am ignored by most the players and the GM even when I try to interact with others but I just play it off and try not to let it bother me.

So after the event ends the GM announces that the particular little girl I was taking care of was adopted by another player who hadn’t even met her. Needless to say I was very livid. I ended up leaving because I felt like no one was taking me into consideration or even allowing me to really interact with the events. Two players reached out to me to try and get me to come back even though in there own words the mods were "Cold hearted." I didn’t talk to the GMs about it because I was so mad and hurt to be stepped on like that, nor did they ever try to reach out to me. Am I just being childish here or am I in the right?

When or why would someone use a programming language (Swift, Java, C++, Rust etc…) over an engine like Unity?

Everytime I’ve read about people asking whether they should write their game in C++ or Unity, Unity is usually the default answer, unless they want to go through the hassle of creating an engine by themselves when Unity already does everything for you. If that’s the case is there ever a case where writing a game in C++, Java, Rust etc… is better than using Unity? If so what are these cases?

Should unarmed melee weapons like fists and claws have the *finesse* and *light* traits? [closed]

In DnD 5e you find under Melee Attacks:

Instead of using a weapon to make a melee weapon attack, you can use an unarmed strike: a punch, kick, head-butt, or similar forceful blow (none of which count as weapons). On a hit, an unarmed strike deals bludgeoning damage equal to 1 + your Strength modifier. You are proficient with your unarmed strikes.

Also Martial Arts for monks, and Claws for tabaxis and tortles deal with unarmed strikes.

All use Strength for the attack and damage roll, with the exception of the Martial Arts for monks, which accepts Dexterity too.

Should "unarmed strikes with these natural weapons" have the finesse and light traits, because wrestling and boxing are not only based on strength but also dexterity like wushu or bujutsu, and there is no reason to use two daggers but can’t do so with claws or fists, feets etc.? The monk still has more damage and would gain two-weapon fighting with its body. So it would not unbalance in game, but give the tabaxi and tortle non-throwable natural daggers.

Is it safe to bring an item like a Bag of Holding into a Genie Warlock’s Bottle?

Since the Genie’s Vessel is described as an object/vessel and never as an item, is it safe to bring a Portable Hole, Bag of Holding, or Heward’s Handy Haversack into the bottle?
If your vessel is a ring per the examples, is it splitting hairs to not call it an item?

Genie’s Vessel: — Tashas p.73
The vessel is a Tiny object, and you can use it as a spellcasting focus for your warlock spells.

Bottled Respite: — Tashas p.74
The interior of the vessel is an extradimensional space in the shape of a 20-foot-radius cylinder, 20 feet high, and resembles your vessel.

Bag of Holding: — DMG p.154
Placing a bag of holding inside an extradimensional space created by a Heward’s handy haversack, portable hole, or similar item instantly destroys both items and opens a gate to the Astral Plane.

Calculate CR of creatures that share spells (like a hag conven)

I recently got inspired by this stat block, that shows that witches can get more powerful when together. https://www.dndbeyond.com/monsters/green-hag-coven-variant

I want to make a similar creature that gets access to some spells when 3 or more of them are within 5 feet of each other. On their own they are CR 1/2, but together they can suddenly pack a punch. I guesstimated them as CR 1 now, but I wonder if that is correct?

enter image description here

Does a UA Dhampir Cleric Turn Itself? What does that look like?

Dhampir have two types tags in the new Unearth Arcana, they are both humanoid and undead. There is even a nice rules reminder in D&D Beyond that points out:

If an effect works on at least one of a creature’s types, that effect can work on that creature. For example, if you are both a Humanoid and an Undead, cure wounds works on you, since the spell works on a Humanoid.

Everything so far is peachy keen. I was going to introduce an NPC that is a Dhampir Cleric, but ran across an odd edge case. If the cleric uses Channel Divinity: Turn Undead I’m not sure what happens:

Channel Divinity: Turn Undead As an action, you present your holy symbol and speak a prayer censuring the undead. Each undead that can see or hear you within 30 feet of you must make a WIS saving throw (DC 14). If the creature fails its saving throw, it is turned for 1 minute or until it takes any damage. A turned creature must spend its turns trying to move as far away from you as it can, and it can’t willingly move to a space within 30 feet of you. It also can’t take reactions. For its action, it can use only the Dash action or try to escape from an effect that prevents it from moving. If there’s nowhere to move, the creature can use the Dodge action.

I know it is play test material and will have weird edge cases like this not hammered out. I also know at my table I will have to make a call if it comes up. However, as it stands, the NPC is an undead within 30 feet who can see and hear itself, so RAW would have to make the roll, right? And what would it mean if you failed it and became turned and had to move away from itself? What would that look like?

When I cast Simulacrum to make a copy of a creature with a feature like Rangers Companion, do I get a free animal companion to go with it?

The Simulacrum spell contains an interesting clause.

It appears to be the same as the original, but it has half the creature’s hit point maximum and is formed without any Equipment. Otherwise, the Illusion uses all the Statistics of the creature it duplicates.

Since the Companion feature is part of a creatures statistics, this means that it should get duplicated, I think. So if I were to duplicate a creature that has a feature like Rangers Companion (or something similar), does the animal companion automatically come with it?

Related questions that would have an answer based on the answer to the primary question:

  • If we don’t get a free companion, can the simulacra bond with a new one?

  • If we do get one, would it also be an illusion, or is it a real flesh-and-blood creature?

  • If the Simulacra dies, does the companion instantly die as well?

  • If the companion dies, can the Simulacra bond with a new companion?

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