How to change two side by sides images by pressing next and previous buttons for both images in Tkinter

Question

I have a two separate lists of multiple images files and their respective names. An image will be displayed with its respective name below it. I have created two buttons to go to 'next' and 'previous' images. What I want is that, on clicking of 'next' button, the program should show next image present in the list, and on clicking 'previous' button, it should show 'previous' image in the list with its respective name. For simplicity, I have only shown one slection box. But actually, there will be a same selection box parallel to it. i.e creating a situation like "Seletion 1 VS Selection 2". Such situation usually occurs when we want to select two teams for a match in a computer game, for example. So kindly, guide me how can this be applied to select two things. But I am sorry to say,I haven't tried anything myself because I have literally zero idea how to do this.

from tkinter import *

root = Tk()
root.geometry('360x240')

all_images = ['image1', 'image2', 'image3', 'image4']   #List of all Images
all_images_names = ['name1', 'name2', 'name3', 'name4'] #List of names of all images

myFrame = Frame(root)
myFrame.pack()

image = Label(myFrame, text = 'Image will be displayed here', font = ('', 12, 'bold'), bg = 'light blue')
image.pack()

lbutton = Button(myFrame, text = '<', fg = 'red', font = ('', 11, 'bold'))
lbutton.pack(side = LEFT)

image_name = Label(myFrame, text = 'Image Name', font = ('', 10,'bold'))
image_name.pack(side = LEFT)

rbutton = Button(myFrame, text = ">", fg = 'red', font = ('', 11, 'bold'))
rbutton.pack(side = LEFT)

root.mainloop()

Answer 1

You have to add functionality to both of the buttons left and right. Thats done assigning to the 'command=' variable of the Button widget a function of your choice.

Below is an example regarding the core functionality. I have stored the images as name, src tuples, since those values come in pairs. In case you want to avoid the "magic numbers" for choosing the name / src, a slower named tuple or a dict might be an option too.

import tkinter as tk

def main():

    images = [
        ('image1','src1'),
        ('image2','src2'),
        ('image3','src3'),
    ]
    
    app = App(images)
    app.mainloop()


class App(tk.Tk):
    def __init__(self, images):
        super().__init__()
        self.geometry("360x240")
        self.cur_image = 0
        self.images=images

        self.image = tk.Label(
            self,
            text=self.images[self.cur_image][1],
            font=('', 12, 'bold'),
            bg='light blue'
        )
        self.image.pack()


        self.left = tk.Button(
            self,
            text="<",
            fg='red',
            font=('', 11, 'bold'),
            command=self.left
        )
        self.left.pack(side=tk.LEFT)

        self.image_name=tk.Label(
            self,
            text=self.images[self.cur_image][0],
            font=('', 10,'bold')
            )
        self.image_name.pack(side=tk.LEFT)

        self.right = tk.Button(
            self,
            text=">",
            fg='red',
            font=('', 11, 'bold'),
            command=self.right
        )
        self.right.pack(side=tk.LEFT)

    def left(self):
        self.cur_image = (self.cur_image - 1) % len(self.images)
        self.update_image()

    def right(self):
        self.cur_image = (self.cur_image + 1) % len(self.images)
        self.update_image()

    def update_image(self):
        self.image_name.config(text=self.images[self.cur_image][0])
        self.image.config(text=self.images[self.cur_image][1])


if __name__ == '__main__':
    main()

Now lets place the functionality in a frame, and create 2 of those frames. One for each of the galleries:

import tkinter as tk

def main():

    images = [
        ('image1','src1'),
        ('image2','src2'),
        ('image3','src3'),
    ]

    app = App(images)
    app.mainloop()


class App(tk.Tk):
    def __init__(self, images):
        super().__init__()
        self.geometry("360x240")

        self.images=images

        self.left = ImageSlider(master=self, images=self.images)
        self.left.grid(column=0, row=0)
        self.right = ImageSlider(master=self, images=self.images)
        self.right.grid(column=1, row=0)


class ImageSlider(tk.Frame):
    def __init__(self, master, images):
        super().__init__(master)
        self.master = master
        self.images = images
        self.cur_image = 0

        self.image = tk.Label(
            self,
            text=self.images[self.cur_image][1],
            font=('', 12, 'bold'),
            bg='light blue'
        )
        self.image.pack()


        self.left = tk.Button(
            self,
            text="<",
            fg='red',
            font=('', 11, 'bold'),
            command=self.left
        )
        self.left.pack(side=tk.LEFT)

        self.image_name=tk.Label(
            self,
            text=self.images[self.cur_image][0],
            font=('', 10,'bold')
            )
        self.image_name.pack(side=tk.LEFT)

        self.right = tk.Button(
            self,
            text=">",
            fg='red',
            font=('', 11, 'bold'),
            command=self.right
        )
        self.right.pack(side=tk.LEFT)

    def left(self):
        self.cur_image = (self.cur_image - 1) % len(self.images)
        self.update_image()

    def right(self):
        self.cur_image = (self.cur_image + 1) % len(self.images)
        self.update_image()

    def update_image(self):
        self.image_name.config(text=self.images[self.cur_image][0])
        self.image.config(text=self.images[self.cur_image][1])


if __name__ == '__main__':
    main()

In order to replace the src - label by the actual image, please check: How to add an image in Tkinter?