Jump to content
hembo

Example of 2D way of showing RTI results in Web

Recommended Posts

That's cool. Could be used to fade back and forth for still images of different rending modes too (like default and specular enhancement)

 

Can you post how others might do this?

 

Also on the IR RTI, we have been doing some of that for about 18 months now, and it is very promising. We are using a modified Canon digital rebel which lets us get up to about 1100nm depending on the filters we use. Probably a whole separate discussion on IR is needed, but we totally agree that RTI with IR can show interesting stuff that you don't see in the visible.

 

Carla

Share this post


Link to post
Share on other sites

You just define images you want to fade in and out, so you can have as many as you need. But yes, it just shows still images.

Here is and example of the code:

 


<style>
#rotating-item-wrapper {
position: relative;
width: 611px;
height: 411px;
}
.rotating-item {
display: none;
position: absolute;
top:0;
}
</style>
<script>

// Code based on http://trendmedia.com/code/jquery-infinite-rotator/
// Modified by Hembo Pagi
// Released under the GPL license
// http://www.opensource.org/licenses/gpl-license.php
// **********************************************************************
jQuery(function($) {
   $(window).load(function() {
       //initial fade-in time (in milliseconds)
       var initialFadeIn = 1500;
       //interval between items (in milliseconds)
       var itemInterval = 3000;
       //cross-fade time (in milliseconds)
       var fadeTime = 1500; 
       //count number of items
       var numberOfItems = $('.rotating-item').length;
       //set current item
       var currentItem = 0;
       //show first item
       $('.rotating-item').eq(currentItem).fadeIn(initialFadeIn);
       $(".rotating-item").click(function() {
           $('.rotating-item').eq(currentItem).fadeOut(fadeTime);
           if(currentItem == numberOfItems -1){
               currentItem = 0;
           } else {
               currentItem++;
           }
           $('.rotating-item').eq(currentItem).fadeIn(fadeTime);
       });
   });
});
</script>
<div id="rotating-item-wrapper">
   <img src="normal.jpg" alt="" class="rotating-item" width="611" height="411" />
   <img src="ir-spec.jpg" alt="" class="rotating-item" width="611" height="411" />
</div>

 

You can separate the CSS and JS into separate file of course. And it relies on jQuery framework.

  • Like 2

Share this post


Link to post
Share on other sites

This is a really great way to show examples of RTI datasets. We have just started a Collection Care blog at the British Library (http://britishlibrary.typepad.co.uk/collectioncare/) and I would be keen to include RTI results in a similar way to the RTI viewer WordPress wrapper plugin. Our blog runs on Typepad rather than Wordpress though... is there a way to convert the plugin for Typepad users with the code above?

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...