none
SharePoint image render with custom solution. RRS feed

  • Question

  • My image is placed in a SharePoint library. Now I want to display it in a page and it's better to make it responsive to display like slider.

    Can anyone share some example or suggestion.

    Friday, November 15, 2019 1:31 AM

Answers

  • Hi developer sp,

    You could use Rest API to read image url from library and place in a div, then use Jquery slider plugin to build slider, please refer the following demo:

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slidesjs/3.0/jquery.slides.min.js"></script>
    <script type="text/javascript">
    jQuery(document).ready(function() {
    var basePath = "http://sp/sites/dev/_api/web/";
    jQuery.ajax({
    url: basePath + "lists/GetByTitle('LibraryTitle')/items?$select=EncodedAbsUrl,Title",
    type: "GET",
    headers: { "Accept": "application/json;odata=verbose" },
    success: function (data) {
    	//script to build UI HERE
    	jQuery.each(data.d.results, function (index, value) {
    	jQuery("#slides").append("<img src='" + value.EncodedAbsUrl + "'" + " alt='" + value.Title + "'/>");
    	});
    	jQuery(function () {
    		jQuery('#slides').slidesjs({
    			play: {
    			active: true,
    			auto: true,
    			interval: 5000,
    			swap: true
    			}
    		});
    	});
    },
    	error: function (data) {
    	//output error HERE
    	alert(data.statusText);
    	}
    	});
    });
    
    </script>
    
    <div id="slider-container">
    	<div id="slides">
    	</div>
    </div>

    BasePath and libraryTitle in Rest Url, please replace with yours.

    Reference:

    SharePoint 2013 REST jQuery Slideshow

    Thanks

    Best Regards


    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.

    Friday, November 15, 2019 7:38 AM

All replies

  • You can create a Picture Library in your SharePoint Site and upload images in it that display as a slideshow. Below articles for your references:

    https://sharepointmaven.com/add-slideshow-sharepoint-site/

    https://www.rsccd.edu/WebPublishingManual/Pages/picture-gallery-slideshow.aspx

    Thanks & Regards,


    sharath aluri

    Friday, November 15, 2019 1:35 AM
  • Hi developer sp,

    You could use Rest API to read image url from library and place in a div, then use Jquery slider plugin to build slider, please refer the following demo:

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slidesjs/3.0/jquery.slides.min.js"></script>
    <script type="text/javascript">
    jQuery(document).ready(function() {
    var basePath = "http://sp/sites/dev/_api/web/";
    jQuery.ajax({
    url: basePath + "lists/GetByTitle('LibraryTitle')/items?$select=EncodedAbsUrl,Title",
    type: "GET",
    headers: { "Accept": "application/json;odata=verbose" },
    success: function (data) {
    	//script to build UI HERE
    	jQuery.each(data.d.results, function (index, value) {
    	jQuery("#slides").append("<img src='" + value.EncodedAbsUrl + "'" + " alt='" + value.Title + "'/>");
    	});
    	jQuery(function () {
    		jQuery('#slides').slidesjs({
    			play: {
    			active: true,
    			auto: true,
    			interval: 5000,
    			swap: true
    			}
    		});
    	});
    },
    	error: function (data) {
    	//output error HERE
    	alert(data.statusText);
    	}
    	});
    });
    
    </script>
    
    <div id="slider-container">
    	<div id="slides">
    	</div>
    </div>

    BasePath and libraryTitle in Rest Url, please replace with yours.

    Reference:

    SharePoint 2013 REST jQuery Slideshow

    Thanks

    Best Regards


    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.

    Friday, November 15, 2019 7:38 AM
  • Dear Jerry,

    Thanks for the demo, this is really helpful.

    Cheers

    Monday, November 18, 2019 1:53 AM