- Home /
How to create an image gallery with previous and next button with C#?
Hi, I'm a total beginner in Unity and I'm currently developing a project in 2D and I'm using C#. I want to make a simple gallery that loads images from a folder and each image has next and previous button. So I have 10 images. I know that I don't have to make 10 scenes with 10 Previous and 10 Next Buttons, but how do I do it in C#? It's supposed to look like this:
Answer by Dibbie · May 11, 2015 at 09:19 AM
I would use the UI system for event triggering, IE: When they click the next/prev buttons, then integrate an array to store the images in at runtime, and just cycle through that array. As far as loading images from a folder, outside of Unity, I dont know how to do that, though if your not opposed to importing all your images into Unity already, you could try this:
Create a new script for your gallery, it will handle the storing of all the images and the actual rotation between them.
C#
//At the very top...
using UnityEngine.UI;
//Outside your functions where you want to set all your declarations...
public Sprite[] gallery; //store all your images in here at design time
public Image displayImage; //The current image thats visible
public Button nextImg; //Button to view next image
public Button prevImg; //Button to view previous image
public int i = 0; //Will control where in the array you are
public void BtnNext () {
if(i + 1 < gallery.Length){
i++;
}
}
public void BtnPrev () {
if(i - 1 > 0){
i--;
}
}
void Update () {
displayImage.sprite = gallery[i];
}
This script would go on a static gameobject, like your Main Camera for example, assuming you never delete it at any point in your game.
I feel like I may be forgetting something, however, if you import all your images, and change their type to Sprites (click the image from inside Unity, in the Inspector, change it from the default "Texture" to "Sprite"), then load each image into the array you just created - youll have to specify the size of the array before you can load the images in (and all this is done from the Inspector).
Once the images are all loaded in, create your 2 buttons, and attach those to your script as well (from the Inspector), and it should work.
That is untested code as well, if this doesnt solve your issue, tell me what happens when you tried it and ill see where I might of misled you.
Hey Dibbie I tried your code but I got an error, it says NullReferenceException on the displayImage. I've stored all the images in the gallery array at design time and I've also added the Next and Previous Buttons. I tried inserting an image gameobject to the displayImage and there's no error but nothing happens on the screen. Do you have any idea why it doesn't work? Thanks
A "NullReferenceException" to me sounds like displayImage might not have been set. For the buttons, make sure you put the script on a camera or something static, and then in the buttons Inspector for its events, add a new one, set the object to be the camera, then set the function to be the correct one for the button your working with (for example, if your setting this up on your NEXT button, your function would be under WhateverYouCalledTheScript.BtnNext)
Try that setup with the buttons, and see what happens. (im a very visual person, so sorry if this reply wasnt greatly helpful to you)
@dibbie. I just want to add if how to display a UI text if the reached it's last/first image when the button detects it. a UI text will prompt the user. thanks
is it possible to used image from inspector rather than to use sprite?
using System.Collections; using UnityEngine; using UnityEngine.UI; using UnityEngine.Sprites;
public class LevelSelection : $$anonymous$$onoBehaviour {
public Sprite[] Levels;
public Button Right;
public Button Left;
public Image ImgPosition;
private int i = 0;
public void Next(){
if (i + 1 < Levels.Length) {
i++;
}
}
public void Prev(){
if (i > 0){
i--;
}
}
void Update(){
ImgPosition.sprite = Levels[i];
}
}
Answer by brettg19802 · Aug 11, 2015 at 01:50 AM
I've been trying to implement this first code into my project, with little success. I had to add a few using UnityEngine; namespaces in order to get it to work at first. But there is still problems with the void update portion
Basically trying to get a Button to go to next Sprite Image / previous Sprite Image in array
using UnityEngine;
using UnityEngine.UI;
using UnityEngine.Sprites;
using System.Collections;
public class NextButton : MonoBehaviour {
public Sprite[] gallery;
public Sprite displayImage;
public Button nextImg;
public Button prevImg;
public int i = 0;
public void BtnNext (){
if(i + 1 < gallery.Length){
i++;
}
}
public void BtnPrev () {
if (i - 1 > 0){
i --;
}
}
void Update () {
displayImage.Sprite = gallery[i];
}
}
Answer by alok-kr-029 · May 11, 2015 at 05:38 AM
Just an Idea how i did it in my project . 1. take a image in the canvas and add two animation moving left and moving right to the image and make a prefab of it . 2.put all the images(prefab) at the right of the screen outside the camera .and add all the images to the array. 2. Now add the event to the button move_left and right . take a pointer which will be pointing to the first element of the array which is being displayed on the screen 3. when you click the button access the next element on the array and get the animation via getcomponent and play the right move animation in reverse order for the current image and left move animation for the next element of the array and update the pointer ..
I am sharing my script hope this will help and make sence
public void left_arrow()
{
if(pointer < panel_to_init && allow_scroll)
{
allow_scroll = false;
StartCoroutine (Allow_click());
Animation anim = panel [pointer].GetComponent<Animation> ();
anim.animation ["Panel_right"].speed = -1;
anim.animation ["Panel_right"].time = anim.animation ["Panel_right"].length;
anim.animation.Play ("Panel_right");
panel [pointer+1].GetComponent<Animation> ().animation["Panel_left"].speed = 1;
panel [pointer + 1].GetComponent<Animation> ().Play ("Panel_left");
pointer ++;
}
}
public void right_arrow()
{
if(pointer !=0 && allow_scroll)
{
allow_scroll = false;
StartCoroutine (Allow_click());
Animation anim = panel [pointer].GetComponent<Animation> ();
anim.animation["Panel_left"].speed = -1;
anim.animation["Panel_left"].time = anim.animation["Panel_left"].length;
anim.animation.Play("Panel_left");
anim.animation["Panel_right"].speed = 1;
panel [pointer-1].GetComponent<Animation> ().animation["Panel_right"].speed = 1;
panel [pointer-1].GetComponent<Animation> ().Play ("Panel_right");
pointer --;
}
}
Answer by Farwall · Oct 18, 2017 at 12:30 PM
Don't need to subtract 1 from i in BtnPrev ()
public void BtnNext (){
if(i + 1 < gallery.Length){
i++;
}
}
public void BtnPrev () {
if (i > 0){
i --;
}
}