CODEWITHSUNDEEP
jqueryhtmlsharepoint
santhosha
santhosha

Reputation: 440

Image Rotating in sharepoint using HTML

I have used this piece of code in share point content editor web-part to rotate the image but it is not working in share-point though it works here.

Jsfiddle

Code sample

<img src="http://placekitten.com/100/100/" data-rotate="90">
<img src="http://placekitten.com/110/110/" data-rotate="45">
<img src="http://placekitten.com/120/120/">

<!-- or use CSS -->
<img src="http://placekitten.com/130/130/" class="rotate90">

Edit: I have placed the above code in a text file and then uploaded it into my share-point. I created a new page and added a content editor web-part add located the text file to display the image file with rotating effects.

Upvotes: 0

Views: 760

Answers (1)

Isaac E. Krauss
Isaac E. Krauss

Reputation: 380

I added the code from Jsfiddle into a Content Editor Web Part and it works quite well.

Here is the complete code that I inserted into a CEWP (updated according to comments):

<!-- HTML part -->
<img src="http://placekitten.com/100/100/" data-rotate="90" class="myClass">
<img src="http://placekitten.com/110/110/" data-rotate="45" class="myClass">
<img src="http://placekitten.com/120/120/">
<img src="http://placekitten.com/130/130/" class="rotate90 myClass">

<!-- JQuery reference -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<!-- JS part -->
<script type="text/javascript">
    /* waits until all page elements are loaded */
    $(window).load(function() {
        $('img.myClass').each(function() {
            var deg = $(this).data('rotate') || 0;
            var rotate = 'rotate(' + $(this).data('rotate') + 'deg)';
            $(this).css({ 
                '-webkit-transform': rotate,
                '-moz-transform': rotate,
                '-o-transform': rotate,
                '-ms-transform': rotate,
                'transform': rotate 
            });
        });
    });
</script>

<!-- CSS part -->
<style type="text/css">
    img.myClass {
        margin: 20px;
        transition: all 400ms; /* duration is 400 miliseconds */
        transition-delay: 5s; /* starts after 5 seconds */
    }

    /* or use CSS */
    .rotate90 {
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
    }
</style>

A few things to take in count:

  • I added all the code in the same CEWP.
  • I added a JQuery reference which was not included in Jsfiddle because that page was loading it on the background, however SharePoint doesn't do that by default, unless you add it to your master page.
  • I added the class "myClass" to the img elements because the CSS style was too general and was affecting other img elements of the page, regardless they were outside the CEWP.

Update:

  • Added $(window).load to run javascript code after all page elements are loaded, thus ensuring the required behavior.
  • Added transition-delay so the transition can start after a specefic amount of secods.

Upvotes: 1

Related Questions