Looking for a way to incorporate an image source property into a larger image?

Question

Looking for a way to incorporate an image source property into a larger image?

I am working on a function that will enlarge an image when clicked on from a selection of 5 or more available images. The idea is that clicking on a small image will trigger the display of a larger version of that image in a frame.

Here is an example of the code for a small image:

<img src="Media//Gallery//img_1.jpg" onclick="showLarge();" alt="Gallery Image 1" />

And here is the placeholder for the larger image that will gain the source of the small image to be displayed:

<img name="largeImage" src="Media//Gallery//Image_1.jpg" alt="Large Image" />

This is my current JavaScript Function snippet:

<script type="text/javascript">
    function showLarge() {
    var largeFrame = document.getElementById("zoomedIn");
    largeFrame.style.visibility='visible';
    }
</script>

Thank you for any help or suggestions!

javascript image function

Answer 1

Answer №1

<img src="Media//Gallery//img_1.jpg" onclick="displayFullsize(this);" alt="Gallery Image 1" />
<script>
function displayFullsize(img)
{
    var enlargedView = document.getElementById("zoomedIn");
    enlargedView.style.visibility='visible';
    var fullImage = document.getElementById('ID_OF_FULL_IMAGE');
    fullImage.src = img.src;
}
</script>

I believe this meets your requirements.

Answer 2

<img src="Media//Gallery//img_1.jpg" onclick="displayFullsize(this);" alt="Gallery Image 1" />
<script>
function displayFullsize(img)
{
    var enlargedView = document.getElementById("zoomedIn");
    enlargedView.style.visibility='visible';
    var fullImage = document.getElementById('ID_OF_FULL_IMAGE');
    fullImage.src = img.src;
}
</script>

I believe this meets your requirements.

Answer 3

Answer №2

<a href="FULL_IMAGE_URL" class="see-more">
   <img src="THUMBNAIL_IMAGE_URL" alt="Gallery Image 1" />
</a>

<div class="display">
   <img hidden="true" id="large-image"/>
</div>

JavaScript snippet:

window.onload = function(){
   for (var item in document.getElementsByClassName('see-more')){
       item.onclick = function(event){
           event.preventDefault();
           document.getElementById('large-image')
               .setAttribute('src', this.getAttribute('href'))
               .removeAttribute('hidden');
       }
   }
}

Answer 4

<a href="FULL_IMAGE_URL" class="see-more">
   <img src="THUMBNAIL_IMAGE_URL" alt="Gallery Image 1" />
</a>

<div class="display">
   <img hidden="true" id="large-image"/>
</div>

JavaScript snippet:

window.onload = function(){
   for (var item in document.getElementsByClassName('see-more')){
       item.onclick = function(event){
           event.preventDefault();
           document.getElementById('large-image')
               .setAttribute('src', this.getAttribute('href'))
               .removeAttribute('hidden');
       }
   }
}

Answer 5

Answer №3

Embrace the power of jQuery!

Start by adding a class to your smaller image.

$('.smallImage').click( function() {
  var imgSource = $(this).attr('src');
  // Take actions such as enlarging, swapping out images for larger ones, and more
});

Answer 6

Embrace the power of jQuery!

Start by adding a class to your smaller image.

$('.smallImage').click( function() {
  var imgSource = $(this).attr('src');
  // Take actions such as enlarging, swapping out images for larger ones, and more
});

Looking for a way to incorporate an image source property into a larger image?

Answer №1

Answer №2

Answer №3

Similar questions

Re-sequence a contiguous array by mapping and filtering its elements

Implementing additional states in an AngularJS app configuration with Ui-Router

How to effectively utilize signed requests for AWS S3 when uploading images?

Having issues with the input event not triggering when the value is modified using jQuery's val() or JavaScript

How can we control the timing of elements displaying on a web page in Javascript?

How to update an Array<Object> State in ReactJS without causing mutation

What is the best way to perform an AJAX request on Hackerrank using JavaScript?

Discover how to achieve the detail page view in Vue Js by clicking on an input field

Invoke a bounded function within an Angular directive using the ng-click event

The element you are trying to interact with is currently not visible, therefore it cannot be accessed

The default selection for React Material Multiselect items is not being chosen

Modifying the content within a DIV element

The performance of CasperJS when used with AngularJS is subpar

Creating Highcharts series with dynamic addition of minimum and maximum values

Can you define the "tab location" in an HTML document using React?

Showing list data from script to template in vue - A step-by-step guide

Utilizing Gulp for optimizing JavaScript files for web browsers, including import statements

Switch between using the useState hook by toggling it with the MUI Switch

When working with JavaScript and Node.js, it is not possible to access an object's index that is

Custom pagination with onSelectionModelChange in React Material UI Data Grid