jQuery Sliding doors image links loaded via AJAX from SharePoint lists.asmx web service
How would you like to display a SharePoint links list with this cool Sliding doors image effect!
There are a lot of amazing Html5 & CSS3 image effects out there and most of them are free and simple to deploy, but unfortunately in the company I’m working for we are using explorer 8 which does not support these effects.. that’s why I looked for a jQuery image effect that will be supported by IE8 but also free to use, and trust me it wasn’t easy to find a cool one that my client will like, but eventually I found this cool Sliding doors effect created by Kevin Liew
After making sure this effect was supported and running smooth in my designated browser I needed to make it work with my SharePoint Links list, usually to do this I would fetch my list items using the client object model syntax I’ve grown accustomed to and used before for example in the solution I described in this post.
But when I tried using that syntax in this scenario my image links loaded on my SharePoint page to slowly, so instead I used a different approach that is a little bit less friendly but still easy to use, by writing a SOAP envelope and using jQuery.AJAX to load my list items directly from the lists.asmx SharePoint web service I managed to fetch my list items much faster, here’s a short and clear explanation I found written by Jignesh Rajput on the subject, So in order to deploy this client-code solution in your SharePoint site, follow these simple steps (no server-side access or major code changes required!) –
- create a SharePoint list with the following columns:
Title, URL, FrontImage (Hyperlink), BackImage (hyperlink), Order (text).
- Add some items to know if your code works.
- Copy the code from the bottom of this post into a content editor web part on your page.
- Change the url value in the code to your own SharePoint site url, make sure you have the /_vti_bin/lists.asmx at the end of it, and open the url in your browser to make sure you have access to your web service.
- Change the list name in the code to your own, also make sure the list column names are identical to yours, and pay attention to the fact that all the names are case-sensitive.
- Basically the code should now work, you can change the query inside the SOAP envelope to better suit your needs, also it’s advised to download the external jQuery.js and jquery.easing.1.3.js, upload them to a SharePoint library and update their reference in the code.
- By the way I made a few adjustments to the original Sliding Doors jQuery effect, so it should work a bit different from the original demo presented on this page.
- Finally, Here’s my code, enjoy! –