CSS photo display with magnification feature

I currently have a functioning inner-zoomable image set up with the code provided. I am interested in converting this setup into an image gallery with zoom capabilities for the selected image element, but I'm unsure where to start. My objective is to have the image source in the second hyperlink below ("img_02" src=") replace the first one. Can anyone offer guidance on how to achieve this?

<html>
<head>
<script src="../jquery-1.8.3.min.js"></script>
<script src="../jquery.elevatezoom.js"></script>
</head>
<body>

    <img id="zoom_01" src="../images/package.jpg"  data-zoom-image="../images/package_big.jpg">
       <img id="zoom_01" src="../images/package.jpg"  data-zoom-image="../images/package_big.jpg">    
       <div id="zoom_01">
              <a href="#" data-image="../images/package.jpg" data-zoom-image="../images/package_big.jpg">
              <img id="img_01" src="../images/package_thumb.jpg" /></a>

              <a href="#" data-image="../images/coffee.jpg" data-zoom-image="../images/coffee_big.jpg">
              <img id="img_02" src="../images/coffee_thumb.jpg" /></a>
       </div>

<!--initialize the plugin and specify the id of the div containing gallery images-->

<script>
$('#zoom_01').elevateZoom({zoomType: "inner", cursor: "crosshair"}); 
</script>

</body>
</html>
javascriptjqueryhtmlcssimage

Answer №1

1) It is important to note that ID should only be used once in a single HTML document. In this case, the "zoom_01" ID has been used 3 times when it should only be used on the first image.

2) If you want to create a gallery, you can use the following code:

$("#zoom_01").elevateZoom({gallery:'gallery', cursor: 'pointer', galleryActiveClass: 'active', imageCrossfade: true, loadingIcon: 'http://www.elevateweb.co.uk/spinner.gif'});

Below is the corrected HTML code:

<img id="zoom_01" src="../images/package.jpg" data-zoom-image="../images/package_big.jpg">
<div id="gallery">
      <a href="../images/package_big.jpg" data-image="../images/package.jpg" data-zoom-image="../images/package_big.jpg">
      <img id="img_01" src="../images/package_thumb.jpg" /></a>

      <a href="../images/coffee_big.jpg" data-image="../images/coffee.jpg" data-zoom-image="../images/coffee_big.jpg">
      <img id="img_02" src="../images/coffee_thumb.jpg" /></a>
</div>

It seems that there is an error in the demo site's HTML code. I will notify them about it via email.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble with setting an image as a background in CSS for Nativescript on iOS?

In my NativeScript app, I am trying to set an image as the background using the CSS property background-image: url("res://ic_more"). It works perfectly on Android, but unfortunately, it does not display on iOS devices. I have confirmed that the image is l ...

cssnativescriptnativescript-angular

Chrome not displaying Bootstrap dropdowns correctly

Lately, I've been exploring Bootstrap and experimenting with its dropdown menus. Typically, I use Chrome for my work but encountered a strange issue with how Chrome is handling my dropdown menus. This forced me to temporarily switch to Edge. Here&apos ...

jqueryhtmlbootstrap-4

Disabling the @import cache feature in LessCSS Assetic

I'm facing a minor issue that is robbing me of precious time. Currently, I am using the assetic plugin with the lesscss filter in my symfony2.1 project. The problem lies in Assetic not detecting changes in imported files when using the @import functi ...

phpcsssymfonylessassetic

What is the significance of the abbreviation 'dbo' in a MongoDB - Express application?

Below is the code snippet provided: app.js const express = require("express"); const app = express(); const cors = require("cors"); require("dotenv").config({ path: "./config.env" }); const port = process.env.PORT | ...

javascriptnode.jsdatabasemongodbexpress

The issue I'm facing is that the style loader is failing to load the CSS within the <head

I am currently facing an issue with importing my CSS into my webpack bundle for our Angular 1 application. Initially, everything was working fine as we bundled our application using Webpack. The HTML included the bundle and vendor scripts, additional Java ...

javascriptcssangularjswebpackwebpack-style-loader

"Error message: Undefined index error when trying to decode JSON

In my database, there's a JSON file named articles.json which contains data as follows: { "articles": [ { "id": 1, "title": "a" } ] } Now, I have written a script to decode this JSON file: <?php include "inc/header. ...

phphtmlarraysjson

Tips for invoking an Android function from an AngularJS directive?

I am facing an issue with my HTML that uses an AngularJS directive. This HTML file is being used in an Android WebView, and I want to be able to call an Android method from this directive (Learn how to call Android method from JS here). Below is the code ...

javascriptandroidangularjstypescript

Persistent error caused by unresponsive Tailwind utility functions

Currently, I am working on a Next.js application and encountered a strange error while adjusting the styling. The error message points to a module that seems to be missing... User Import trace for requested module: ./src/app/globals.css GET /portraits 500 ...

csstypescriptnext.jstailwind-css

Ways to showcase your style using Bootstrap

Can you help me figure out how to align this sidebar properly? I tried using the d-flex property but it doesn't seem to be working for me. The sidebar should be on the left side and the two containers should be centered. For a clearer explanation, pl ...

htmlcssbootstrap-5

What is the reason for the difference in width between Bootstrap-5 row and regular div blocks?

My code may seem simple, but I have encountered an issue with it: <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="99fbf6f6edeaedebf8e9d9acb7abb7a9">[email protected]</a ...

csstwitter-bootstrapbootstrap-5

What is the process for assigning a PHP function's return value to a JavaScript variable?

Is there a way to retrieve a value from a PHP function and assign it to a JavaScript variable? As shown in the following example: PHP: // Destination folder for downloaded files $date = date('m.d.y'); mkdir("uploads/" . $date, 0777, true); $ ...

phpjavascriptajax

Display a div in front of another using Material UI when hovering

Is there a way to display a black transparent div in front of a <MediaCard/> when hovering over it? Below is the code snippet I am using with Material UI: <Box> <Typography variant='h3'>Home Page</Typography> < ...

cssreactjsmaterial-ui

Django Crispy Forms do not support JavaScript functionality

In my project, I am working on creating a client form where the country, province, and city are selected based on different models: class Country(models.Model): Country = models.CharField(max_length=100, unique=True) def __str__(self): ...

javascriptdjangodjango-crispy-forms

Central peak in an expansive sphere

I'm attempting to mimic the design shown in this visual representation: While I am familiar with how to generate a semi-circle using CSS, my goal is to only create the top central segment of a larger circle. Specifically, I am seeking the CSS code n ...

css

Establish the dimensions of the element to match the dimensions of a responsive image

Currently, I am working on implementing flippable images on my website. It is important to me that the "back" of these images matches the dimensions of the front image. The challenge I am facing is that I have applied the Bootstrap img-responsive class to ...

jqueryhtmlcssangularjstwitter-bootstrap-3

Encountering an error while trying to launch Chrome with Puppeteer

Currently, I have set up an elastic-beanstalk instance on AWS and am in the process of creating a pdf export feature on a dashboard using Puppeteer. Although I have successfully tested the application locally, I encountered an error when attempting to run ...

javascriptnode.jsamazon-web-servicespuppeteeramazon-elastic-beanstalk

Compressing CSS with the help of Gulp

Can anyone assist me with minifying my css in this gulpfile.js for compiling css? I have tried multiple code snippets from the internet but none of them seem to work. Your help would be greatly appreciated. Thank you. var gulp = require('gulp&apo ...

csssassgulpgulp-sassgulp-minify-css

The datepicker on mobile devices fails to display the default text of dd/mm/yyyy

This JSP code uses Bootstrap5: <form action="" method="GET" class="row g-1 mb-3 "> <div class="col-lg-2 col-md-4 col-6 mb-2"> <input type="date" class="form-control" name=" ...

htmlcssbootstrap-5

What is the method for extracting information from a dropdown menu using AJAX and transmitting it to a PHP script?

Looking to obtain the name of the selected category from a drop-down list using AJAX and send it to the PHP page containing the AJAX script. Here is the updated code: Action code: public function actionCreate() { $model=new News; // ...

phpjqueryajaxyii

Is there a feature on the webpage that allows users to save clicked xy points and display them as text?

Is there a way to incorporate a feature on a website that displays clicked xy points as text, allowing them to be easily copied and pasted? ...

jsonhtmlcanvas