How do I make a div a specific size when doing an image gallery?

I am making a new custom plugin for my WordPress site that displays an image gallery using the shortcode:

[galleryplugin]

The plugin uses PHP and JavaScript.
Essentially I want the shortcode to display the gallery and it does, but I need the images to be the same size. I tried to make a specific tag with size = height:”100px”;width:”50px” but when it does that:

The image (I think) does not become that size
The ‘next’ function (the broken image button) does not move the image along to the next one

Does anyone know how to fix this?
Thanks for your answer in advance!

Code
PHP:

<?php
/**
* Plugin Name: Eddie’s Tech Gallery
* Description: Custom gallery plugin by Eddie’s Tech
* Version: 1.0
* Author: Eddie’s Tech
* Author URI: https://www.eddiestech.co.uk
*/

function load_js() {
if (is_front_page()) {
wp_enqueue_script( ‘gallery’, plugins_url( ‘/gallery.js’, __FILE__ ),array(),time());
}
}
add_action(‘wp_enqueue_scripts’,’load_js’);

add_shortcode(‘galleryplugin’, ‘shortcode’);
function shortcode() {
?>
<br />
<img id=”whiteBox” src=”/wp-content/plugins/gallery/imgs/img1.png”></img>
<a href=”#” onclick=”next();return false;”><img src=”next.png”/></a>
<br />
<?
}
?>

Code
JS:

var myImage= new Array();
myImage[0]=”/wp-content/plugins/gallery/imgs/img1.png”;
myImage[1]=”/wp-content/plugins/gallery/imgs/img2.png”;
myImage[2]=”/wp-content/plugins/gallery/imgs/img3.png”;

var ImageCnt = 0;

function next(){
ImageCnt++;

ImageCnt %= myImage.length

document.getElementById(“whiteBox”).src = myImage[ImageCnt];
}

Read more here:: How do I make a div a specific size when doing an image gallery?

Leave a Reply

Your email address will not be published. Required fields are marked *