locked
How to display default image in a gallery RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    User248267340 posted

    This is my first attempt to write an image gallery, where I have the thumbnails on the left in vertical format,

    When I click on the thumbnails, javascript then shows the image at 100% in the middle, next to the thumbs. Works great, and I love it.

    However, when I start up the app and navigate to the page, I'd like to see the default image show in the middle before the user ever clicks

    on the thumbnails. I don't know how to get that done.

    Here's what I have done so far:

    1. Code for the thumbnail:  <div class="col-3">
      <div class="mycolumn">
           <div class="mythumb">
                <img src="@Model.ViewImage1" width="40%" onclick="myFunction(this);" />
           </div></div>
    2. Div for the middle full image: <div class="col-5">
      <div class="mycontainer">
      <img id="expandedImg" style="width:100%">
      <div id="imgtext"></div>
      </div>
      </div>
    3. Code for Javascript:

      function myFunction(imgs) {
      var expandImg = document.getElementById("expandedImg");
      var imgText = document.getElementById("imgtext");

      expandImg.src = imgs.src;
      imgText.innerHTML = imgs.alt;
      expandImg.parentElement.style.display = "inline";
      }

    Any advice? I'd be grateful!

    Corey

    Thursday, August 29, 2019 5:57 PM

Answers

  • Question
    Sign in to vote
    0
    Sign in to vote
    User-719153870 posted

    Hi coreysan,

    when I start up the app and navigate to the page, I'd like to see the default image show in the middle before the user ever clicks

    According to your description, you want to execute a JS function to show the default image when the page load.

    There are several ways to archieve this goal.

    Take <body onload="function()"> for example, you will need to "rewrite" your myFunction(imgs) like below:

    function showdefaultimg() {
            var expandImg = document.getElementById("expandedImg");
            var imgText = document.getElementById("imgtext");
            var imgs = document.getElementById("thumbimg");//thumbimg is the id of thumb image which you might want to add
            expandImg.src = imgs.src;
            imgText.innerHTML = imgs.alt;
            expandImg.parentElement.style.display = "inline";
        }

    After this, add this function to body's onload event like below:

    <body onload="showdefaultimg()">

    This should work, if there's anything obstruct you, please feel free to let me know.

    Best Regard,

    Yang Shen

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, August 30, 2019 2:05 AM

All replies

  • Question
    Sign in to vote
    0
    Sign in to vote
    User-719153870 posted

    Hi coreysan,

    when I start up the app and navigate to the page, I'd like to see the default image show in the middle before the user ever clicks

    According to your description, you want to execute a JS function to show the default image when the page load.

    There are several ways to archieve this goal.

    Take <body onload="function()"> for example, you will need to "rewrite" your myFunction(imgs) like below:

    function showdefaultimg() {
            var expandImg = document.getElementById("expandedImg");
            var imgText = document.getElementById("imgtext");
            var imgs = document.getElementById("thumbimg");//thumbimg is the id of thumb image which you might want to add
            expandImg.src = imgs.src;
            imgText.innerHTML = imgs.alt;
            expandImg.parentElement.style.display = "inline";
        }

    After this, add this function to body's onload event like below:

    <body onload="showdefaultimg()">

    This should work, if there's anything obstruct you, please feel free to let me know.

    Best Regard,

    Yang Shen

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, August 30, 2019 2:05 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User248267340 posted

    Yang - thanks so very much! It worked well. I wrote a small html app to test first.

    As a follow up, I'm learning to code MVC Core. In that product, the default is to put the <body> element in a master layout page, and all pages load the master layout.

    Is there a way to run the javascript function from within one page, where I don't have access to the <body> element?

    Friday, August 30, 2019 3:58 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User-719153870 posted

    Hi coreysan,

    As a follow up, I'm learning to code MVC Core. In that product, the default is to put the <body> element in a master layout page, and all pages load the master layout.

    I'm sorry that .NET Core is beyond my capacity. I suggest you can post another new thread in .Net Core forum for your question.

    Yang - thanks so very much! It worked well. I wrote a small html app to test first.

    In this case, you are willing to mark my post as answer. Thanks.

    Best Regard,

    Yang Shen

    Monday, September 2, 2019 1:29 AM