locked
How to swap img name dynamically RRS feed

  • Question

  • User248267340 posted

    I have a project for a store, where page 1 loads a picture in portrait, say "Flowers_300x500.jpg". Then when I load page 2, I need the same picture only in landscape, say "Flowers_600x400.jpg".

    What's a best practice for coding this? I could get the corresponding filename by fetching from a database, or I could just write C# logic to pick the file I need. Is there a certain way that seems to be the best method for this?

    I thought I saw an example where someone coded "Flowers_{size}.jpg" where you just change the content of "size". I have no idea if I understand that correctly, its just something I saw.

    Tuesday, October 20, 2020 8:22 PM

Answers

  • User1312693872 posted

    Hi,coreysan

    • The User navigates to website where products are displayed in a store. The index page has a standard loop of images using the card class. The images would be in portrait style of each product.
    • When a user clicks on "Detail" for a given product, the detail page would show a larger version of the product in landscape style.

    You can use modal to show the related size changed images when click the different images in the carousel, the following is my demo:

    <style>
        .modal-dialog {
            ;
            display: table; /* This is important */
            overflow-y: auto;
            overflow-x: auto;
            width: auto;
            min-width: 300px;
        }
        </style>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div id="imageCarousel" class="carousel slide" style="height:400px;width:200px" data-interval="2000" data-ride="carousel" data-pause="hover" data-wrap="true">
                    <ol class="carousel-indicators">
                        <li data-target="#imageCarousel" data-slide-to="0" class="active"></li>
                        <li data-target="#imageCarousel" data-slide-to="1"></li>
                    </ol>
    
                    <div class="carousel-inner">
                        <div class="item active">
                            <img src="~/Images/dog.jpg" id="image1" style="height:400px;width:200px" class="img-responsive" data-toggle="modal" data-target="#imagemodal">
                        </div>
                        <div class="item">
                            <img src="~/Images/leaf.jpg" id="image2" style="height:400px;width:200px" class="img-responsive"data-toggle="modal" data-target="#imagemodal">
                        </div>
                    </div>
    
                    <a class="left carousel-control" data-target="#imageCarousel" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="right carousel-control" data-target="#imageCarousel" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Creates the bootstrap modal where the image will appear -->
    <div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content" >
                <div class="modal-body">
                    <img src="" id="imagepreview" style="width: 600px; height: 400px;">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    
    @section Scripts
    {
        <script>
            $(document).ready(function () {
                $("#image1").on("click", function () {
                    $('#imagepreview').attr('src', $('#image1').attr('src'));  //get the image when click
                    $('#imagemodal').modal('show');
                });
                $("#image2").on("click", function () {
                    $('#imagepreview').attr('src', $('#image2').attr('src'));
                    $('#imagemodal').modal('show');
                });
            });
        </script>
    }

    Result:

    Best Regards,

    Jerry Cai

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, October 22, 2020 6:59 AM

All replies

  • User475983607 posted

    coreysan

    What's a best practice for coding this?

    You have not provided a clear requirement or flow.  Setting the value is very simple. 

    Server side.

    <img id="pic1" src="@somevar" />

    JavaScript

    document["pic1"].src = somevar;

    It is up to you to pass the dynamic value.  This is part of your general design. 

    Moving from page 1 to page 2 is not dynamic.  Can you explain how the image is dynamic?   Are you passing a model?

    Tuesday, October 20, 2020 9:05 PM
  • User248267340 posted

    Please forgive me for not explaining this very well. I appreciate your help.

    The flow would work like this:

    1. The User navigates to website where products are displayed in a store. The index page has a standard loop of images using the card class. The images would be in portrait style of each product.
    2. When a user clicks on "Detail" for a given product, the detail page would show a larger version of the product in landscape style.

    So the issue is switching between portrait and landscape. (I have not figured out how to use one image for both.)

    I'm trying to decide if I should store two pathnames (one in portrait, one in landscape) in the database, or just one pathname that is generic, and get Javascript to be more specific.

    As an example, for option 1 I could have the index page grab "Flowers_200_400.jpg" for the product, and when the user clicks "Detail" I would set the image path to "Flowers_600_400.jpg".

    For option 2, if I used Javascript I could simply have the index page get the generic "Flowers.jpg" from the database, and then modify the path to "Flowers_200_400.jpg"; if the user clicks "Detail", I could modify the path to "Flowers_600_400.jpg".

    So I was just wondering if there's a standard way to do this (I described it as a best practice, but maybe I should just say the most stable and efficient way to swap images).

    Wednesday, October 21, 2020 6:54 PM
  • User1312693872 posted

    Hi,coreysan

    • The User navigates to website where products are displayed in a store. The index page has a standard loop of images using the card class. The images would be in portrait style of each product.
    • When a user clicks on "Detail" for a given product, the detail page would show a larger version of the product in landscape style.

    You can use modal to show the related size changed images when click the different images in the carousel, the following is my demo:

    <style>
        .modal-dialog {
            ;
            display: table; /* This is important */
            overflow-y: auto;
            overflow-x: auto;
            width: auto;
            min-width: 300px;
        }
        </style>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div id="imageCarousel" class="carousel slide" style="height:400px;width:200px" data-interval="2000" data-ride="carousel" data-pause="hover" data-wrap="true">
                    <ol class="carousel-indicators">
                        <li data-target="#imageCarousel" data-slide-to="0" class="active"></li>
                        <li data-target="#imageCarousel" data-slide-to="1"></li>
                    </ol>
    
                    <div class="carousel-inner">
                        <div class="item active">
                            <img src="~/Images/dog.jpg" id="image1" style="height:400px;width:200px" class="img-responsive" data-toggle="modal" data-target="#imagemodal">
                        </div>
                        <div class="item">
                            <img src="~/Images/leaf.jpg" id="image2" style="height:400px;width:200px" class="img-responsive"data-toggle="modal" data-target="#imagemodal">
                        </div>
                    </div>
    
                    <a class="left carousel-control" data-target="#imageCarousel" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="right carousel-control" data-target="#imageCarousel" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Creates the bootstrap modal where the image will appear -->
    <div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content" >
                <div class="modal-body">
                    <img src="" id="imagepreview" style="width: 600px; height: 400px;">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    
    @section Scripts
    {
        <script>
            $(document).ready(function () {
                $("#image1").on("click", function () {
                    $('#imagepreview').attr('src', $('#image1').attr('src'));  //get the image when click
                    $('#imagemodal').modal('show');
                });
                $("#image2").on("click", function () {
                    $('#imagepreview').attr('src', $('#image2').attr('src'));
                    $('#imagemodal').modal('show');
                });
            });
        </script>
    }

    Result:

    Best Regards,

    Jerry Cai

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, October 22, 2020 6:59 AM