iGenezys's avatar

Image gallery - Browse a collection 1 by 1

Hi people.

I want to do an Image gallery on my laravel project. I want to get all my images randomly, and display them one by one, and have a button that can browse the collection.

I have the collection like this :

public function random(){
        $images = Images::all();
        $countImage = Images::count();

        $randoImages = $images->random($countImage);

        return view('main.random', compact('randoImages'));
    }

And I have this in the view :

@foreach ($randoImages as $img)
        <div class="col s12">
            <img class="responsive-img loutre z-depth-5" src="{{ URL::asset("images/$img->image") }}">
        </div>
        <div class="col s12 btns">
            <div class="col s4">
                <a class="btn btn-main left z-depth-3"><span class="material-icons arr">keyboard_arrow_left</span></a>
            </div>
            <div class="col s4 center">
                <a class="btn btn-floating btn-coeur z-depth-5"><span class="material-icons fav">favorite</span></a>
            </div>
            <div class="col s4">
                <a class="btn btn-main right z-depth-3"><span class="material-icons arr">keyboard_arrow_right</span></a>
            </div>
        </div>
    @endforeach

But actually my foreach is displaying all the images on the same page, and I don't know how to display them one by one.

And for the two buttons right/left, I want them to browse the collection, but I didn't find anything about this, seems that next()/previous() methods are not existing in laravel.

I don't want to use the pagination as much as possible, so if you have some ideas that could help me to fix these problems, I thank you in advance !

0 likes
2 replies
topvillas's avatar

You're going to have to do this with some client side code and css.

iGenezys's avatar

JS or something like that ? Fine, but can I have the beginning of the runway ? Because actually I just don't know what to do for solve my problems.

Please or to participate in this conversation.