Image Viewer App in Python using Tkinter

Last Updated : 19 Jun, 2024

Prerequisites: Python GUI – tkinter, Python: Pillow

Have you ever wondered to make a Image viewer with the help of Python? Here is a solution to making the Image viewer with the help of Python. We can do this with the help of Tkinter and pillow. We will discuss the module needed and code below.

Module Needed

Tkinter: Tkinter is library with the help of which we can make GUI(Graphical User Interface).

 pip install tkinter

Pillow: We can add photos as it is an imaging library of Python.

 pip install pillow

Now let's code for it

Getting Started

Below Code demonstrates the basic structures, button initialization, and layout of the GUI produced

Python

# importing the tkinter module and PIL that # is pillow module from tkinter import * from PIL import ImageTk, Image # Calling the Tk (The initial constructor of tkinter) root = Tk() # We will make the title of our app as Image Viewer root.title("Image Viewer") # The geometry of the box which will be displayed # on the screen root.geometry("700x700") # Adding the images using the pillow module which # has a class ImageTk We can directly add the # photos in the tkinter folder or we have to # give a proper path for the images image_no_1 = ImageTk.PhotoImage(Image.open("Sample.png")) image_no_2 = ImageTk.PhotoImage(Image.open("sample.png")) image_no_3 = ImageTk.PhotoImage(Image.open("Sample.png")) image_no_4 = ImageTk.PhotoImage(Image.open("sample.png")) # List of the images so that we traverse the list List_images = [image_no_1, image_no_2, image_no_3, image_no_4] label = Label(image=image_no_1) # We have to show the box so this below line is needed label.grid(row=1, column=0, columnspan=3) # We will have three button back ,forward and exit button_back = Button(root, text="Back", command=back, state=DISABLED) # root.quit for closing the app button_exit = Button(root, text="Exit", command=root.quit) button_forward = Button(root, text="Forward", command=lambda: forward(1)) # grid function is for placing the buttons in the frame button_back.grid(row=5, column=0) button_exit.grid(row=5, column=1) button_forward.grid(row=5, column=2) root.mainloop()

Forward function: This function is for adding the functionality to forward button

Python

def forward(img_no): # GLobal variable so that we can have # access and change the variable # whenever needed global label global button_forward global button_back global button_exit label.grid_forget() # This is for clearing the screen so that # our next image can pop up label = Label(image=List_images[img_no-1]) # as the list starts from 0 so we are # subtracting one label.grid(row=1, column=0, columnspan=3) button_for = Button(root, text="forward", command=lambda: forward(img_no+1)) # img_no+1 as we want the next image to pop up if img_no == 4: button_forward = Button(root, text="Forward", state=DISABLED) # img_no-1 as we want previous image when we click # back button button_back = Button(root, text="Back", command=lambda: back(img_no-1)) # Placing the button in new grid button_back.grid(row=5, column=0) button_exit.grid(row=5, column=1) button_for.grid(row=5, column=2)

Backward Function: This function is for adding the functionality to backward button

Python

# importing the tkinter module and PIL # that is pillow module from tkinter import * from PIL import ImageTk, Image def forward(img_no): global label global button_forward global button_back global button_exit label.grid_forget() label = Label(image=List_images[img_no-1]) label.grid(row=1, column=0, columnspan=3) button_forward = Button(root, text="forward", command=lambda: forward(img_no+1)) if img_no == 4: button_forward = Button(root, text="Forward", state=DISABLED) button_back = Button(root, text="Back", command=lambda: back(img_no-1)) button_back.grid(row=5, column=0) button_exit.grid(row=5, column=1) button_forward.grid(row=5, column=2) def back(img_no): global label global button_forward global button_back global button_exit label.grid_forget() label = Label(image=List_images[img_no - 1]) label.grid(row=1, column=0, columnspan=3) button_forward = Button(root, text="forward", command=lambda: forward(img_no + 1)) button_back = Button(root, text="Back", command=lambda: back(img_no - 1)) if img_no == 1: button_back = Button(root, text="Back", state=DISABLED) label.grid(row=1, column=0, columnspan=3) button_back.grid(row=5, column=0) button_exit.grid(row=5, column=1) button_forward.grid(row=5, column=2) root = Tk() root.title("Image Viewer") root.geometry("700x700") # Change the png file name a/c to your image  image_no_1 = ImageTk.PhotoImage(Image.open("Sample.png")) image_no_2 = ImageTk.PhotoImage(Image.open("Capture3.png")) image_no_3 = ImageTk.PhotoImage(Image.open("Sample2.png")) image_no_4 = ImageTk.PhotoImage(Image.open("Sample4.png")) List_images = [image_no_1, image_no_2, image_no_3, image_no_4] label = Label(image=image_no_1) label.grid(row=1, column=0, columnspan=3) button_back = Button(root, text="Back", command=back, state=DISABLED) button_exit = Button(root, text="Exit", command=root.quit) button_forward = Button(root, text="Forward", command=lambda: forward(1)) button_back.grid(row=5, column=0) button_exit.grid(row=5, column=1) button_forward.grid(row=5, column=2) root.mainloop()

Complete Code

Images Used and their order -

Order in which the images will be shown.

Python

# importing the tkinter module and PIL # that is pillow module from tkinter import * from PIL import ImageTk, Image def forward(img_no): global label global button_forward global button_back global button_exit label.grid_forget() label = Label(image=List_images[img_no-1]) label.grid(row=1, column=0, columnspan=3) button_forward = Button(root, text="forward", command=lambda: forward(img_no+1)) if img_no == 4: button_forward = Button(root, text="Forward", state=DISABLED) button_back = Button(root, text="Back", command=lambda: back(img_no-1)) button_back.grid(row=5, column=0) button_exit.grid(row=5, column=1) button_forward.grid(row=5, column=2) def back(img_no): global label global button_forward global button_back global button_exit label.grid_forget() label = Label(image=List_images[img_no - 1]) label.grid(row=1, column=0, columnspan=3) button_forward = Button(root, text="forward", command=lambda: forward(img_no + 1)) button_back = Button(root, text="Back", command=lambda: back(img_no - 1)) if img_no == 1: button_back = Button(root, text="Back", state=DISABLED) label.grid(row=1, column=0, columnspan=3) button_back.grid(row=5, column=0) button_exit.grid(row=5, column=1) button_forward.grid(row=5, column=2) root = Tk() root.title("Image Viewer") root.geometry("700x700") image_no_1 = ImageTk.PhotoImage(Image.open("Sample.png")) image_no_2 = ImageTk.PhotoImage(Image.open("sample.png")) image_no_3 = ImageTk.PhotoImage(Image.open("Sample.png")) image_no_4 = ImageTk.PhotoImage(Image.open("sample.png")) List_images = [image_no_1, image_no_2, image_no_3, image_no_4] label = Label(image=image_no_1) label.grid(row=1, column=0, columnspan=3) button_back = Button(root, text="Back", command=back, state=DISABLED) button_exit = Button(root, text="Exit", command=root.quit) button_forward = Button(root, text="Forward", command=lambda: forward(1)) button_back.grid(row=5, column=0) button_exit.grid(row=5, column=1) button_forward.grid(row=5, column=2) root.mainloop()