-1

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 <div> tag with size = height:"100px";width:"50px" but when it does that:

  1. The image (I think) does not become that size
  2. 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];
  }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.