Looking for a tutorial on creating a thumbnail image slider

[orclord1]

I am a new coder and have created a gallery website of product photos. The products are small gaming figurines. Currently, when anyone clicks on an image, it will direct the user to screen showing a full size image of that picture, along with other information pertaining to that figurine.

I have also been taking pictures of the backs of the figures, and for some of the larger figurines I take pictures from multiple angles. Basically what I would like to code is where the “active” image will show as full-size and other associated images will show as small thumbnails in a section that will scroll from left to right. (i.e. it might show up to 3 thumbnails before the scroller is needed).

(Sorry if I have used the wrong terms to describe any of that – I am only an amateur coder at best).

I have built my website in php and have avoided using any plug-ins.

I have tried to look for tutorials on how I can achieve this, but I keep getting links to Word Press plug-ins as search results, so I suspect I am not using the right terminology in my searches.

If anyone can point me to a tutorial how coding such an element on my page I would be very appreciative. (Also if such a function has a specific name, could you please let me know what the correct terminology is.)

Thank you.

[Pepster64]

What I do is design the website as a static web page that way I can just look for image galleries, sliders or what have you tutorials in javascript, css, etc… I find there are plenty of tutorials out there and a lot of times I will look at the design of those tutorials as they are usually static when it comes to design. Then I simply convert it over dynamically something like the following that I’m currently working on.

 <main class="main-area">
        <div id="gallery" class="frame" data-total="<?php echo count($photos); ?>">
            <?php
            $x = 1;
            foreach ($photos as $photo) {
                $cameraInfo = (($photo->Model) ? $photo->Model . ' --- ' . $photo->FocalLength . ' ' . $photo->Aperture . ' ' . $photo->ISO . ' ' . $photo->ExposureTime : null);
                echo '<a id="image' . $x . '" href="' . $photo->path . '" title="' . $cameraInfo . '"><img class="box" src="' . $photo->thumb_path . '" alt="' . $photo->category . '">' . '</a>' . "\n";
                $x += 1;
            }
            ?>
        </div>
    </main>

I find it easier doing it that way as it starts making sense when it comes to php. Another alternative is to use a templating system, but unless you are working on a large project with many people that tends to be little bit of an overkill in my opinion.

[orclord1]

Thank you for that example. I’m still a very new coder so there are parts there that are a little outside of my current knowledge base.

Could you please explain what is happening here:

$photo->path

How do I define what the path is?

Currently, for a file location I have been doing something like this:

$path = 'images/hasbro/monsters/';
echo'<a href="' . $path . $photo . "'>';