Interactive image grid with adjustable description field per image upon selection

Question

Interactive image grid with adjustable description field per image upon selection

My goal is to create a grid of images with a single text field below the grid. This text field should display the description of the image that was last clicked. The grid is implemented using floating divs within a main div, as shown in the code snippet below. While the exact implementation may not be crucial, I am seeking advice on how best to implement the dynamic description box. Would pure HTML/CSS suffice for this task, or will javascript/jquery be necessary? One approach could involve placing all descriptions in a single box and adjusting z-indices on click events. However, I am unsure if this is the optimal solution or if it would function correctly.

I have yet to find a definitive answer to this question online, so I hope that by asking here, it can also benefit others who may have similar inquiries.

javascript jquery html css

Answer 1

Answer №1

Using jQuery makes it really simple. You can save the text you want to display in an element, or even in an attribute like `alt` or `data-` on the `img` tag. Then just grab that text and fill your div at the bottom.

$('.ingredient').on('click',function() {
  $('#caption').html($(this).find('.meta').html())
})

.meta {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ingredient-showcase">
  <div class="ingredient"><img src="..." alt="..." />
    <div class="meta">1</div>
  </div>
  <div class="ingredient"><img src="..." alt="..." />
    <div class="meta">2</div>
  </div>
  <div class="ingredient"><img src="..." alt="..." />
    <div class="meta">3</div>
  </div>
  <div id="caption"></div>
</div>

Answer 2

Using jQuery makes it really simple. You can save the text you want to display in an element, or even in an attribute like `alt` or `data-` on the `img` tag. Then just grab that text and fill your div at the bottom.

$('.ingredient').on('click',function() {
  $('#caption').html($(this).find('.meta').html())
})

.meta {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ingredient-showcase">
  <div class="ingredient"><img src="..." alt="..." />
    <div class="meta">1</div>
  </div>
  <div class="ingredient"><img src="..." alt="..." />
    <div class="meta">2</div>
  </div>
  <div class="ingredient"><img src="..." alt="..." />
    <div class="meta">3</div>
  </div>
  <div id="caption"></div>
</div>

Answer 3

Answer №2

Avoid using the z-index property and instead utilize JavaScript or jQuery to populate the box with descriptions. You have the option to retrieve the description from the alt tag or by adding a data attribute containing the description and retrieving it from there, as shown below:

<div id="ingredient-showcase">
    <div class="ingredient"><img src="..." data-description="..." /></div>
    ...
</div>
<div id="description"></div>

With jQuery, you can simply implement the following script:

$(function () {
    $('.ingredient > img').click(function () {
        $('#description').text($(this).data('description'));
    });
});

Answer 4

Avoid using the z-index property and instead utilize JavaScript or jQuery to populate the box with descriptions. You have the option to retrieve the description from the alt tag or by adding a data attribute containing the description and retrieving it from there, as shown below:

<div id="ingredient-showcase">
    <div class="ingredient"><img src="..." data-description="..." /></div>
    ...
</div>
<div id="description"></div>

With jQuery, you can simply implement the following script:

$(function () {
    $('.ingredient > img').click(function () {
        $('#description').text($(this).data('description'));
    });
});

Answer 5

Answer №3

var TEMP_URL = "https://cdn.example.com/photo.jpg";

var $grid = $('#grid');
var $description = $('#description');

var columns = 3;

var items = [{
    src: TEMP_URL,
    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
    alt: "I've no idea what alt is."
  },
  {
    src: TEMP_URL,
    description: "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
    alt: "I've no idea what alt is."

  },
  {
    src: TEMP_URL,
    description: "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
    alt: "I've no idea what alt is."

  }];

$description.text(items[0].description);

var $row;
items.forEach(function(item, index) {
  if (index % columns === 0) {
    $row = $('<div class="row">');
    $grid.append($row);
  }
  var $column = $('<div class="column">');
  var $img = $('<img alt="' + item.alt + '" src="' + item.src + '">');
  $column.append($img);
  $column.css({
    width: 100 / columns + '%',
    float: 'left'
  });
  $column.click(function() {
    $description.text(items[index].description);
  });
  $row.append($column);
});

var $row = $('<div>');

* {
  box-sizing: border-box;
}

#over {
  width: 80%;
  margin: 20px auto;
}

.grid {
  display: block;
}

.row {
  overflow: hidden;
  display: block;
}

.column {
  border: none;
  display: block;
}

.description {
  font-size: 12px;
}

img {
  width: 100%;
  padding: 3px;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="over">
  <div id="grid" class="grid"></div>
  <div id="description" class="description"></div>
</div>

Answer 6

var TEMP_URL = "https://cdn.example.com/photo.jpg";

var $grid = $('#grid');
var $description = $('#description');

var columns = 3;

var items = [{
    src: TEMP_URL,
    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
    alt: "I've no idea what alt is."
  },
  {
    src: TEMP_URL,
    description: "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
    alt: "I've no idea what alt is."

  },
  {
    src: TEMP_URL,
    description: "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
    alt: "I've no idea what alt is."

  }];

$description.text(items[0].description);

var $row;
items.forEach(function(item, index) {
  if (index % columns === 0) {
    $row = $('<div class="row">');
    $grid.append($row);
  }
  var $column = $('<div class="column">');
  var $img = $('<img alt="' + item.alt + '" src="' + item.src + '">');
  $column.append($img);
  $column.css({
    width: 100 / columns + '%',
    float: 'left'
  });
  $column.click(function() {
    $description.text(items[index].description);
  });
  $row.append($column);
});

var $row = $('<div>');

* {
  box-sizing: border-box;
}

#over {
  width: 80%;
  margin: 20px auto;
}

.grid {
  display: block;
}

.row {
  overflow: hidden;
  display: block;
}

.column {
  border: none;
  display: block;
}

.description {
  font-size: 12px;
}

img {
  width: 100%;
  padding: 3px;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="over">
  <div id="grid" class="grid"></div>
  <div id="description" class="description"></div>
</div>

Answer 7

Answer №4

#ingredient-list {
  margin: auto;
  width: 90%
}

.item {
  border: 1px solid #ccc;
  height: 170px;
  width: 170px;
  float: left;
  padding: 5px;
}

#description-box {
  clear: both;
  padding: 5px;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="">
  <div id="ingredient-list">
    <div class="item" ng-click="description = 'description 1'">
      <img src="..." alt="...">
    </div>
    <div class="item" ng-click="description = 'description 2'">
      <img src="..." alt="..." />
    </div>
    <div class="item" ng-click="description = 'description 3'">
      <img src="..." alt="..." />
    </div>
    ...
  </div>
  <p id="description-box">{{ description }}</p>
</div>

Answer 8

#ingredient-list {
  margin: auto;
  width: 90%
}

.item {
  border: 1px solid #ccc;
  height: 170px;
  width: 170px;
  float: left;
  padding: 5px;
}

#description-box {
  clear: both;
  padding: 5px;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="">
  <div id="ingredient-list">
    <div class="item" ng-click="description = 'description 1'">
      <img src="..." alt="...">
    </div>
    <div class="item" ng-click="description = 'description 2'">
      <img src="..." alt="..." />
    </div>
    <div class="item" ng-click="description = 'description 3'">
      <img src="..." alt="..." />
    </div>
    ...
  </div>
  <p id="description-box">{{ description }}</p>
</div>

Answer 9

Answer №5

How about using angular.js for this?

var app = angular.module('app', []);

app.controller('IngredientController', function($scope) {
  $scope.description = '';

  $scope.setDescription = function(description) {
    $scope.description = description;
  };

  $scope.ingredients = [{
      src: "...",
      alt: "...",
      description: "description 1"
    },
    {
      src: "...",
      alt: "...",
      description: "description 2"
    },
    {
      src: "...",
      alt: "...",
      description: "description 3"
    }
  ];
});

* {
  box-sizing: border-box;
}

#over {
  text-align: center;
}

#ingredient-showcase {
  margin: auto;
  display: block;
  width: 90%;
  overflow: hidden;
  text-align: center;
}

.ingredient {
  border: 1px solid #ccc;
  display: inline-block;
  height: 170px;
  width: 170px;
  float: left;
  padding: 5px;
}

.ingredient img {
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<div ng-app="app" id="over" ng-controller="IngredientController">
  <div id="ingredient-showcase">
    <div class="ingredient" ng-repeat="ingredient in ingredients" ng-click="setDescription(ingredient.description)">
      <img ng-src="{{ ingredient.src }}" alt="{{ ingredient.alt }}" />
    </div>
  </div>
  <div>{{ description }}</div>
</div>

Answer 10

How about using angular.js for this?

var app = angular.module('app', []);

app.controller('IngredientController', function($scope) {
  $scope.description = '';

  $scope.setDescription = function(description) {
    $scope.description = description;
  };

  $scope.ingredients = [{
      src: "...",
      alt: "...",
      description: "description 1"
    },
    {
      src: "...",
      alt: "...",
      description: "description 2"
    },
    {
      src: "...",
      alt: "...",
      description: "description 3"
    }
  ];
});

* {
  box-sizing: border-box;
}

#over {
  text-align: center;
}

#ingredient-showcase {
  margin: auto;
  display: block;
  width: 90%;
  overflow: hidden;
  text-align: center;
}

.ingredient {
  border: 1px solid #ccc;
  display: inline-block;
  height: 170px;
  width: 170px;
  float: left;
  padding: 5px;
}

.ingredient img {
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<div ng-app="app" id="over" ng-controller="IngredientController">
  <div id="ingredient-showcase">
    <div class="ingredient" ng-repeat="ingredient in ingredients" ng-click="setDescription(ingredient.description)">
      <img ng-src="{{ ingredient.src }}" alt="{{ ingredient.alt }}" />
    </div>
  </div>
  <div>{{ description }}</div>
</div>

Interactive image grid with adjustable description field per image upon selection

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Ensure the cursor is continually grabbing while moving items within a list using the @angular/cdk/drag-drop functionality

Difficulty Uploading Files

Add CSS styling to input text that is not empty

The unexpected syntax error, indicated by an ampersand followed by a quotation mark, was encountered in [location] on line 7

jQuery's outerHeight() and height functions may experience flickering or fail to update properly when the window is resized to an odd number

Ways to retrieve Payload following the Request url access

Creating a JSON File with an Illustrator Script

How can I retrieve the Azure subscription IDs of the currently logged in user using @azure/msal-angular?

Styling with CSS: Creating a scrollable gallery of images with a hover effect

When using ng-repeat in Angular.js, an additional td is created

Repairing a syntax error in a jQuery selector variable

Issue with implementing JQuery datepicker within Angular 7 CLI application

Leverage the Power of Mongoose Schema Across Various Files (mongoose)

What is the best way to implement a never-ending scrolling grid loader within a scrollable area using Codeigniter?

Prevent clicks from passing through the transparent header-div onto bootstrap buttons

The issue with updating the menu class in Internet Explorer 8 is not being resolved

How can I retrieve text instead of HTML using jQuery.get?

javascriptEmbed youtube video thumbnail dynamically as users input a URL

Creating a conditional query in Mongoose: A step-by-step guide

Error in jQuery: Null property causing TypeError when reading 'text'