hembo Posted October 11, 2012 Report Share Posted October 11, 2012 I played around with HTML5 and made a simple image fader to switch in between images. Check it out (just click on the image to change): http://www.arheovisi...0/infrared-rti/ Hembo Link to comment Share on other sites More sharing options...
cdschroer Posted October 11, 2012 Report Share Posted October 11, 2012 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 Link to comment Share on other sites More sharing options...
hembo Posted October 12, 2012 Author Report Share Posted October 12, 2012 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. Link to comment Share on other sites More sharing options...
Mike Posted October 15, 2012 Report Share Posted October 15, 2012 Thanks for posting this code. I'll try to adapt it with our next project and see how it goes. Link to comment Share on other sites More sharing options...
Graeme Posted February 18, 2013 Report Share Posted February 18, 2013 We have started to use this as the default way of showing RTIs on the ACRG blog thanks to Hembo: http://acrg.soton.ac.uk/tag/rti-example/ Link to comment Share on other sites More sharing options...
cduffy Posted July 10, 2013 Report Share Posted July 10, 2013 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? Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.