Creating an Online Photo Album with JavaScript

Question

Creating an Online Photo Album with JavaScript

Looking for assistance to finish up my photo gallery project. I have created thumbnails that display 5 images at the top of my page, and below them is a div that should show the selected image in its original size when clicked. Can anyone guide me on what CSS and JavaScript code I need to add to complete this functionality? Your help would be greatly appreciated.

Thank you.

HTML:

div id="img-thumbnails">
    <img src="assets/imgs/img-01.jpg">
    <img src="assets/imgs/img-02.jpg">
    <img src="assets/imgs/img-03.jpg">
    <img src="assets/imgs/img-04.jpg">
    <img src="assets/imgs/img-05.jpg">
</div>

<div id="img-original">
</div>

CSS:

#img-thumbnails {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

#img-thumbnails img {
    width:200px;
    height:100px;
    cursor: pointer;
    margin-left:20px;
}

#img-original {
    height:500px;
    width:800px;
    border:10px solid black;
    margin:30px auto;
}

javascript css

Answer 1

Answer №1

Here is a sample implementation that can serve as a reference for resolving your problem.

In the absence of available images, I have utilized div elements in this demonstration.

var preview = document.getElementById('pretend_view');
var images = document.getElementById('pretend_images');
var thumbnails = document.querySelectorAll('#pretend_images > div');

thumbnails.forEach(function(elem){
elem.onclick = onClick.bind(null, elem);
});

function onClick(elem, e){
clearPreview();
  addToPreview(elem);
}

function clearPreview(){
var elem = document.querySelector('.preview');
  
  if(elem){
    elem.className = elem.className.replace('preview', '');
    images.appendChild(elem);
  }
}

function addToPreview(elem){
elem.className = 'preview';
  preview.appendChild(elem);
}

#pretend_images > div {
    display: inline-block;
    width:50px;
    height:50px;
    cursor: pointer;
    margin-left:20px;
}

#pretend_preview {
    height:200px;
    width:300px;
    border:10px solid black;
    margin:30px auto;
}

#a {
  background-color: black;
}

#b {
  background-color: blue;
}

#c {
  background-color: green;
}

#d {
  background-color: pink;
}

.preview {
    height:200px;
    width:300px;
}

<div id="pretend_images">
  <div id="a"></div>
  <div id="b"></div>
  <div id="c"></div>
  <div id="d"></div>
</div>

 <div id="pretend_view"></div>

Answer 2

Here is a sample implementation that can serve as a reference for resolving your problem.

In the absence of available images, I have utilized div elements in this demonstration.

var preview = document.getElementById('pretend_view');
var images = document.getElementById('pretend_images');
var thumbnails = document.querySelectorAll('#pretend_images > div');

thumbnails.forEach(function(elem){
elem.onclick = onClick.bind(null, elem);
});

function onClick(elem, e){
clearPreview();
  addToPreview(elem);
}

function clearPreview(){
var elem = document.querySelector('.preview');
  
  if(elem){
    elem.className = elem.className.replace('preview', '');
    images.appendChild(elem);
  }
}

function addToPreview(elem){
elem.className = 'preview';
  preview.appendChild(elem);
}

#pretend_images > div {
    display: inline-block;
    width:50px;
    height:50px;
    cursor: pointer;
    margin-left:20px;
}

#pretend_preview {
    height:200px;
    width:300px;
    border:10px solid black;
    margin:30px auto;
}

#a {
  background-color: black;
}

#b {
  background-color: blue;
}

#c {
  background-color: green;
}

#d {
  background-color: pink;
}

.preview {
    height:200px;
    width:300px;
}

<div id="pretend_images">
  <div id="a"></div>
  <div id="b"></div>
  <div id="c"></div>
  <div id="d"></div>
</div>

 <div id="pretend_view"></div>

Creating an Online Photo Album with JavaScript

Answer №1

Similar questions

How to Implement Snap-Enabled Dragging in a Container Using jQuery UI

What occurs when a function component is passed as a state variable?

The function for the "load next page" action in ngInfiniteScroll is continuously triggered

Convert JavaScript files into JSON files using Laravel

Include a fresh attribute in the Interface

What is the best way to ensure that a Material UI transition component fully occupies the space of its parent component?

Error: Invalid Argument - The argument 'PanelController' is expected to be a function, but it is undefined

Tips for customizing the appearance of Material UI's time picker diolog styles

What is the best way to utilize toggle("slide") in order to reveal a message letter by letter?

Using jQuery to retrieve the text content of child elements

Angular and D3.js: Enhancing StackedBar Chart ToolTips with Added Functionality

Uploading files in ASP.NET MVC without creating a view, utilizing Valums Ajax Uploader technology

JavaScript random number functionality experiencing an unexpected problem

Building a loading spinner component in a react-native project

Create a d3 map specifically for a selected region based on the provided latitude and longitude coordinates

Displaying a list of terms and their corresponding definitions side by side

Expanding Your jQuery Library from a Content Delivery Network

How is it possible that both of my AngularJS services are being directed to the exact same Restful Java EE web service?

Issues with dropdown checklist functionality

Node.JS executes Sandbox within a RESTful service environment