Solved

Selecting and freezing a specific image in a javascript slideshow

Posted on 2009-07-01
7
228 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
  • 4
  • 3
7 Comments
 
LVL 4

Expert Comment

by:khsater
Comment Utility
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
Comment Utility
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
Comment Utility
Sure, just give me a bit and I'll see what I can do.
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 4

Accepted Solution

by:
khsater earned 500 total points
Comment Utility
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
Comment Utility
Absolutely amazing, thanks!
0
 
LVL 1

Author Closing Comment

by:gabrielPennyback
Comment Utility
This is perfect. Thanks again.

- John
0
 
LVL 4

Expert Comment

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

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now