?
Solved

Selecting and freezing a specific image in a javascript slideshow

Posted on 2009-07-01
7
Medium Priority
?
234 Views
Last Modified: 2012-05-07
Please take a look at this web page: http://livinatlevel5.us/gallery.html

I would like to put some kind of action on each of the 11 thumbnails so that on click the slide show goes to that image and stops. We will then need a button to resume the slide show.

Assuming that this is all possible, please answer the first part and then I can ask a new question for the second part.

Thanks,
John
0
Comment
Question by:gabrielPennyback
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
7 Comments
 
LVL 4

Expert Comment

by:khsater
ID: 24758787
I found an extended version of the jQuery extension you're using that has a control feature:
http://www.openstudio.fr/Animated-InnerFade-with-JQuery.html?lang=en
The extension you're using now doesn't have a built-in method of pausing and resuming, so this may be your best choice.
0
 
LVL 1

Author Comment

by:gabrielPennyback
ID: 24758893
Thanks for the link. I copied and pasted as much of the code as I could find, but of course all i get is the 2 large images and nothing else. If you have the time to download everything and get it working, could you post your code so I can see how it works?  In the meantime I'll do a search for Javascript slide show with pause.

Thanks,
John
0
 
LVL 4

Expert Comment

by:khsater
ID: 24758904
Sure, just give me a bit and I'll see what I can do.
0
RHCE - Red Hat OpenStack Prep Course

This course will provide in-depth training so that students who currently hold the EX200 & EX210 certifications can sit for the EX310 exam. Students will learn how to deploy & manage a full Red Hat environment with Ceph block storage, & integrate Ceph into other OpenStack service

 
LVL 4

Accepted Solution

by:
khsater earned 2000 total points
ID: 24759080
I've gotten it to work quite well.  In order to use this extension, you'll have to extract the contents of the zip file on the page I linked to earlier onto your server in the same directory as the page it'll appear on.
If you don't want the next or previous buttons you'll have to rename the image files located in:
jquery.animated.innerfade\img
named previous.gif and next.gif to anything you want.
It should, then, work.
I added a class to your style sheet named controlBox that changes the position of the controls in the slideshow.
Let me know if you have any other questions or need me to clarify anything.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>gallery</title>
<style type="text/css">
#container {width:849px; height:686px; margin:auto; border:1px solid white;}
#topBand{width:849px; height: 60px; padding:12px 0 0 0; clear:both;}
#top566{width:849px; height:566px; background:url(css/images/RooftopGlassFX.jpg) no-repeat; clear:both}
#top590{width:849px; height:590px; background:url(css/images/RooftopGlassFX590.jpg); clear:both}
body {background: url(css/images/BodyBG1.jpg) repeat-x #888efc; margin:40px; font-family:"Gill Sans MT"; color:white; font-size:20px}
#navbar{width:672px;height:40px;margin:480px auto 0px;clear:both}
#navbar2{width:672px;height:40px;margin: 0 0 20px 30px;padding: 6px 0 0 0; float:left }
#pageName{width:147px; height:42px; float:left; background:url(css/images/gallery.png) no-repeat}
#picFrame{width:640px; height:480px; border:2px solid white; margin: 10px auto 0;}
#bottomStrip{width: 801px; height: 45px; padding:25px 24px; background:#111/*url(css/images/bottomStrip.jpg) no-repeat*/; border-top:1px solid white; margin: auto}
.thumbnail{width:60px; height:45px; border:1px solid white; margin: 0 0 0 10px; float:left}
.mainGraphic{margin:0; padding:0; list-style:none}
.controlBox{
	position: absolute;
	right: 25px;
	top: 25px;
}
</style>
<link href="css/menuBar2.css" rel="stylesheet" type="text/css" />
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="jquery.animated.innerfade/js/jquery.animated.innerfade.js"></script>
 
<script type="text/javascript">
	$(document).ready(
		function(){
			$('.mainGraphic').animatedinnerfade({
				speed: 'slow',
				timeout: 4000,
				type: 'sequence',
				containerheight: '480px',
				containerwidth: '640px',
				animationSpeed: 0,
				controlBox: 'show',
				controlButtonsPath: 'jquery.animated.innerfade/img/',
				controlBoxClass: 'controlBox'
			});		
		}
	);
 
</script>	
 
</head>
 
<body>
 
<div id="container">
<div id="top590">
<div id="topBand">
<div id="navbar2">
<ul id="menu">
	<li><a href="index.html">Home</a></li>
    <li><a href="gallery.html">Gallery</a></li>
    <li><a href="thoughts.html">Thoughts</a></li>
    <li><a href="#">Events</a></li>
</ul>
</div>
<div id="pageName"></div>
 
</div>
 
<!--<div id="picFrame"><img src="images/img01.jpg" alt="group" width="640" height="480" /></div>-->
 
<div id="picFrame">
    <ul class="mainGraphic">
        <li><img src="images/img01.jpg" alt="group" width="640" height="480" /></li>
        <li><img src="images/img02.jpg" alt="group" width="640" height="480" /></li>
        <li><img src="images/img03.jpg" alt="group" width="640" height="480" /></li>
        <li><img src="images/img04.jpg" alt="group" width="640" height="480" /></li>
        <li><img src="images/img05.jpg" alt="group" width="640" height="480" /></li>
        <li><img src="images/img06.jpg" alt="group" width="640" height="480" /></li>
        <li><img src="images/img07.jpg" alt="group" width="640" height="480" /></li>
        <li><img src="images/img08.jpg" alt="group" width="640" height="480" /></li>
        <li><img src="images/img09.jpg" alt="group" width="640" height="480" /></li>
        <li><img src="images/img10.jpg" alt="group" width="640" height="480" /></li>
        <li><img src="images/img11.jpg" alt="group" width="640" height="480" /></li>            
    </ul>
 
</div>
 
</div>
 
<!--THUMBNAILS-->
<div id="bottomStrip">
<div class="thumbnail"><img src="images/img01.jpg" alt="group" width="60" height="45" /></div>
<div class="thumbnail"><img src="images/img02.jpg" alt="group" width="60" height="45" /></div>
<div class="thumbnail"><img src="images/img03.jpg" alt="group" width="60" height="45" /></div>
<div class="thumbnail"><img src="images/img04.jpg" alt="group" width="60" height="45" /></div>
<div class="thumbnail"><img src="images/img05.jpg" alt="group" width="60" height="45" /></div>
<div class="thumbnail"><img src="images/img06.jpg" alt="group" width="60" height="45" /></div>
<div class="thumbnail"><img src="images/img07.jpg" alt="group" width="60" height="45" /></div>
<div class="thumbnail"><img src="images/img08.jpg" alt="group" width="60" height="45" /></div>
<div class="thumbnail"><img src="images/img09.jpg" alt="group" width="60" height="45" /></div>
<div class="thumbnail"><img src="images/img10.jpg" alt="group" width="60" height="45" /></div>
<div class="thumbnail"><img src="images/img11.jpg" alt="group" width="60" height="45" /></div>
</div>
 
 
 
</div>
</body>
</html>

Open in new window

0
 
LVL 1

Author Comment

by:gabrielPennyback
ID: 24759414
Absolutely amazing, thanks!
0
 
LVL 1

Author Closing Comment

by:gabrielPennyback
ID: 31598988
This is perfect. Thanks again.

- John
0
 
LVL 4

Expert Comment

by:khsater
ID: 24759419
No problem!  I'm glad it worked for you.
0

Featured Post

Introducing Priority Question

Increase expert visibility of your issues by participating in Priority Question, our latest feature for Premium and Team Account holders. Adjust the priority of your question to get emergent issues in front of subject-matter experts for help when you need it most.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question