none
Enlarge Image in a list once hovered RRS feed

  • Question

  • I have a list one of the columns is image thumbnail I want to enlarge it once hoovered, I tried most of the online answers but couldn't achieve what i need mostly because the css works only if you specify the image url. is there a way to enlarge all img tag or a script to enlarge only images in that column.

    I don't use designer or info-path.

    Thank you

    Friday, August 23, 2019 5:56 PM

Answers

  • Hi HelpsNice,

    Please add a script editor web part inside you list and add below code - 

    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
    <script>
    $(document).ready(function(){
    $('.ms-vb-lastCell img').each(function(){
      $(this).addClass("customthumbnail");
    });
    });
    </script>
    <style>
    .customthumbnail:hover {
        ;
        top:-25px;
        left:-35px;
        width:500px;
        height:auto;
        display:block;
        z-index:999;
    }
    </style>

    Make sure that Image is column is last column in your list and also check it's class using developer tool. In my case image column is being render inside td tag that has a class name - ms-vb-lastCell 

    Here is the screenshot - 


    K Mohit

    Tuesday, August 27, 2019 9:23 PM

All replies

  • Hi, Guest1993,

    According to your description I assume you do not want to fill in the URL by hand for the css works. The source url is always needed to show a larger image when you hover. As a workaround, you can try to use jquery to get all the image URL and add a custom attribute, class="thumbnail" to each image element that you would like to enlarge on hover. 

    You can start with this blog: https://www.sharepointsky.com/image-hover-effects-css/

    Reference link:https://success.figure-eight.com/hc/en-us/articles/202703155-CSS-Guide-to-Enlarge-Images-on-Hover

    Best Regards

    Jerry


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Monday, August 26, 2019 5:54 AM
  • Hi, I have seen both of the articles, neither of them help me because the first one seems to be skipping a lot of steps 

    "After adding all the items in SharePoint List, Just create a JS(JavaScript) File for retrieving the List column(“Hyperlink or Picture”) from the SharePoint List"

    And the second one is where I have to add URL for the image manually.

    My goal is to have the user add a picture to the image column and and some JS, Jquery, CSS will be applied to let it enlarge on hover. 

    For example This css limit the image size in the column :

    <style>
    .ms-listviewtable .ms-cellstyle img {
        width: 200px;
        }
    </style>

    Thank you

    Tuesday, August 27, 2019 2:05 PM
  • Hi HelpsNice,

    Please add a script editor web part inside you list and add below code - 

    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
    <script>
    $(document).ready(function(){
    $('.ms-vb-lastCell img').each(function(){
      $(this).addClass("customthumbnail");
    });
    });
    </script>
    <style>
    .customthumbnail:hover {
        ;
        top:-25px;
        left:-35px;
        width:500px;
        height:auto;
        display:block;
        z-index:999;
    }
    </style>

    Make sure that Image is column is last column in your list and also check it's class using developer tool. In my case image column is being render inside td tag that has a class name - ms-vb-lastCell 

    Here is the screenshot - 


    K Mohit

    Tuesday, August 27, 2019 9:23 PM
  • Hi, HelpsNice,

    Kumar's script works perfect in my end. Please have a try on it. And please mark the reply as answer if you find it helpful.

    Best Regards

    Jerry


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Wednesday, August 28, 2019 1:20 AM
  • Thank you so much this works great( if i only can figure out how to mark it as an answer). However,

    It works sometimes and others it doesn't with out me changing anything.

     another issue is,I limit the image size too 200px by css, it doesn't work. My style is this:

    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
    <script>
    $(document).ready(function(){
    $('.ms-vb-lastCell img').each(function(){
      $(this).addClass("customthumbnail");
    });
    });
    </script>
    <style>
    .customthumbnail:hover {
        ;
        top:-25px;
        left:-35px;
        width:500px;
        height:auto;
        display:block;
        z-index:999;
    }
    .ms-listviewtable .ms-cellstyle img {
        width: 200px;
        }
    </style>

    I know it is properly a different question but I hope you could help. Another way to fix the image size

    is by doing the steps in this link but i don't want to leave it up to the user to specify image size so that's Why I took the CSS approach.

    https://social.technet.microsoft.com/Forums/en-US/fc1d665c-ca11-4055-a173-19afd6309613/resizing-an-image-within-a-sharepoint-list

    Thank you again for a great answer.



    • Edited by HelpIsNice Wednesday, August 28, 2019 6:17 PM
    Wednesday, August 28, 2019 3:03 PM
  • Hi, HelpIsNice,

    Is the Guest1993 on of your account? If so, sign in with that account then you can mark the reply as answer. 

    For the other question, I recommend you to open a new post with your requirements which will help community members to get an better idea of your issue.

    Best Regards

    Jerry


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Thursday, August 29, 2019 8:57 AM