Onmouseover slideshow (similar to RedTube)

Dev Shed Forums Sponsor:

March 12th, 2008, 06:13 AM

o2pb

Contributing User

Join Date: Jan 2005

Posts: 58

Time spent in forums: 7 h 26 m 26 sec
Reputation Power: 6

Onmouseover slideshow (similar to RedTube)

I really like how on redtube.com (adult site) when you mouseover an image, it shows a slideshow of the video. I have the necessary images, but Im not too sure on the implementation of something similar.

Whats the best solution for this that requires the least amount of code.

March 12th, 2008, 10:42 AM

vbrtrmn

4:04 Time Not Found

Join Date: Jan 2004

Location: Northern Virginia

Posts: 2,273

Time spent in forums: 1 Week 2 Days 22 h 10 m
Reputation Power: 333

The effect is non-trivial and you can't just convert a movie to a series of images with JavaScript.

My advice, hire a developer who is familiar with video processing.

__________________
I am so smart, I am so smart, S.M.R.T ... I mean S.M.A.R.T.

Stop Using Pop-Ups

March 13th, 2008, 01:08 AM

o2pb

Contributing User

Join Date: Jan 2005

Posts: 58

Time spent in forums: 7 h 26 m 26 sec
Reputation Power: 6

I already have the sequences of images ready, Im very familiar with that part of programming. I know nothing about JS, and I simply need to turn the frames I already have into a looping sideshow on mouseover.

Comments on this post

vbrtrmn agrees: Most people who ask general questions like that one don't seem to know much. You're the one
exception

March 13th, 2008, 03:01 AM

Joseph Taylor

Text Ninja

Join Date: Jun 2005

Location: Vancouver, British Columbia, Canada

Posts: 647

Time spent in forums: 1 Week 5 Days 20 h 42 m 54 sec
Reputation Power: 127

Send a message via Skype to Joseph Taylor

Send a message via XFire to Joseph Taylor

What is the pattern you're using for the image names? Say we have a video located here: vids/redhead-lesbian-nurse-bukkake-34.flv. You'll need to save the slideshow images according to some rigidly defined pattern, like such: slides/redhead-lesbian-nurse-bukkake-34/1.jpg, slides/redhead-lesbian-nurse-bukkake-34v/2.jpg, slides/redhead-lesbian-nurse-bukkake-34/3.jpg. The number of screenshots per video must also remain constant.

Now, if you feel the need to invoke rule thirty four on an entire gallery of pictures in a div named "tgp-gallery", a bit of simple looping will go a long way:

javascript Code:

Original - javascript Code

onload = function() {
  var secondsBetweenSlides = 0.5;
  var slidesPerImage = 5;
  var gallery = document.getElementById("tgp-gallery"); // grab the container div
  var pornLinksInGallery = gallery.getElementsByTagName("a");
  for (var i = pornLinksInGallery.length - 1; i >= 0; i--) {
    (function() {
      var img = pornLinksInGallery[i].firstChild;
      if (img && img.tagName && img.tagName.toLowerCase() == "img") {
        var match = null;
        if (match = img.href.match(/^(slides\/.*)\//)) {
          var cycleImage = function(n) {
            if (typeof n != "number") {
              img.currentImage = img.currentImage || 0;
              img.currentImage++;
            } else {
              img.currentImage = n;
            }
            img.currentImage = img.currentImage % slidesPerImage;
            img.src = match + "/" + (img.currentImage + 1) + ".jpg";
          }
          img.onmouseover = function() {
            img.interval = setInterval(cycleImage, secondsPerSlide * 1000);
          };
          img.onmouseout = function() {
            if (img.interval) {
              clearInterval(img.interval);
              cycleImage(0);
            }
          };
        }
      }
    })();
  }
}

html4strict Code:

Original - html4strict Code

 
<div id="tgp-gallery">
  <ul>
    <li><a href="vids/interracial-moneyshot-yummy-4245.flv"><img src="slides/interracial-moneyshot-yummy-4245/1.jpg" /></a></li>
    <li><a href="vids/blonde-redhead-licking-3472.flv"><img src="slides/blonde-redhead-licking-3472/1.jpg" /></a></li>
    <li><a href="vids/toys-star-hard-and-fast-5512.flv"><img src="slides/toys-star-hard-and-fast-5512/1.jpg" /></a></li>
    <li><a href="vids/licking-milf-brunette-273.flv"><img src="slides/licking-milf-brunette-273/1.jpg" /></a></li>
    <li><a href="vids/fist-mouth-lesbian-4877.flv"><img src="slides/fist-mouth-lesbian-4877/1.jpg" /></a></li>
    <li><a href="vids/behind-sofa-blowing-1001.flv"><img src="slides/behind-sofa-blowing-1001/1.jpg" /></a></li>
  </ul>
</div>

Now, I haven't tested any of the above code, and you'll probably want to preload the images and change the naming/markup structure (and, by association, the logic of the loop)... But I hope it's enough to give you some clues and a place to begin. Good luck.

Comments on this post

Winters agrees: lol

March 13th, 2008, 06:35 PM

Arty Effem

Contributing User

Join Date: May 2006

Location: England

Posts: 321

Time spent in forums: 6 Days 11 h 28 m 35 sec
Reputation Power: 48

Quote:

Originally Posted by o2pb

Someone asked for effectively the same thing recently, and this is what I threw together:
http://scripterlative.com/test/multiswap.htm

source file:
http://scripterlative.com/test/multiswap.js

Comments on this post

vbrtrmn agrees: nice

Joseph Taylor agrees!

__________________
No it's not 'awesome' - it's just code.

Scripterlative

March 14th, 2008, 05:45 AM

o2pb

Contributing User

Join Date: Jan 2005

Posts: 58

Time spent in forums: 7 h 26 m 26 sec
Reputation Power: 6

Quote:

Originally Posted by Arty Effem

Someone asked for effectively the same thing recently, and this is what I threw together:
http://scripterlative.com/test/multiswap.htm

source file:
http://scripterlative.com/test/multiswap.js

Thats perfect! Thanks!

Joseph Taylor, thanks for the effort as well.

One thing thou, does this example pre-load the images?

Last edited by o2pb : March 14th, 2008 at 10:57 AM.

Viewing: Dev Shed Forums > Web Design > JavaScript Development > Onmouseover slideshow (similar to RedTube)

« Previous Thread | Next Thread »

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Posting Rules
You may not post new threads You may not post replies You may not post attachments You may not edit your posts vB code is On Smilies are On [IMG] code is On HTML code is Off

View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox

Forum Jump

Free IT White Papers!

How to Present Effectively Online
This white paper offers practical and actionable advice on the key steps that any presenter should consider as they plan and execute a Webinar or online meeting.

Open Source Security Myths
Open Source Software (OSS) is computer software whose source code is available to the general public with relaxed or non-existent intellectual property restrictions (or arrangement such as the public domain), and is usually developed with the input of many contributors.

Power and Cooling Capacity Management for Data Centers
This paper describes the principles for achieving power and cooling capacity management.

Scalable, Fault-Tolerant NAS for Oracle - The Next Generation
For several years NAS has been evolving as a storage alternative for Oracle databases, and for good reason: NAS is quite often the simplest, most cost-effective storage approach for Oracle. Learn about the benefits that HP's approach to scalable NAS brings to Oracle environments in this comprehensive white paper.

Understanding Web Application Security Challenges
This white paper discusses many common threats and preventive measures for Web application security, and explains what you can do to help protect your organization.

More Free IT White Papers!