Question

How do I use JQUERY 1.3.2 on my website?

Asked by: DJMgraphix

Hi Experts...

I hope that this is an easy one for you. I'm looking for an easy gallery to create and add to my HTML webpage.

I downloaded JQUERY 1.3.2

I've never used it before but I read that all i should have to do is point it at the source folder for the images.

Can someone please give me some help.

Thanks,
DJM

This Question has been solved and asker verified All Experts Exchange premium technology solutions are available to subscription members.

Subscribe now for full access to Experts Exchange and get

Instant Access to this Solution

Plus...

30 Day FREE access, no risk, no obligation
Collaborate with the world's top tech experts
Unlimited access to our exclusive solution database
Never be left without tech help again

Subscribe Now

Asked On: 2009-08-20 at 19:41:03ID24670252
Tags: jquery
,; gallery
Topics: Web-Based CMS
,; JavaScript
,; Miscellaneous Web Development
Participating Experts: 3
Points: 500
Comments: 19

Trusted by hundreds of thousands everyday for fast, accurate and reliable tech support.

"The time we save is the biggest benefit of Experts Exchange to Warner Bros. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange." Mike Kapnisakis, Warner Bros.
"Our team likes having a resource that is more secure than just using Google and most experts using this service really know their stuff. It's nice to look here first versus using Google." Dayna Sellner, Lockheed Martin
"Anytime that I've been stumped with a problem, 9 out of 10 times Experts Exchange has either the accepted solution or an open discussion of the potential solution to the problem." Kenny Red, eBay Inc.

See what Experts Exchange can do for you.

Got a question?

We've got the answer.

Experts Exchange has been collecting answers to technology questions since 1996…3 million and counting! If you have a question, chances are we already have your answer.

Screenshot of Experts Exchange Knowledgebase

Need individual assistance?

Our experts are ready to help.

If you can't find the exact answer you're looking for, ask our exclusive community of 50,000 experts. You’ll get a personalized answer from a trusted professional.

Want to learn from the best?

Read articles from industry experts.

Thousands of free tech tips, tricks, how-to’s and tutorials are available in our peer reviewed articles section. See for yourself how smart our experts are, no login required.

Working on a long term project?

Store your work and research.

Save solutions to your questions, answers you’ve discovered through searching plus helpful articles in your personal knowledgebase for easy future access.

Access the answers to your technology questions today.

Subscribe Now

30-day free trial. Register in 60 seconds.

What Makes Experts Exchange Unique?

Members of the expert community talk about why the experience at Experts Exchange is different than what you will find anywhere else.

Trusted by the world's most respected brands.

image of each brand's logo

Faithfully serving IT professionals since 1996.

Experts Exchange Logo

Try it out and discover for yourself.

Subscribe Now

30-day free trial. Register in 60 seconds.

Free Tech Articles

WARNING: 5 Reasons why you should NEVER fix a computer for free.
It is in our nature to love the puzzle. We are obsessed. The lot of us. We love puzzles. We love the challenge. We thrive on finding the answer. We hate disarray. It bothers us deep in our soul. W...
SCCM OSD Basic troubleshooting
SCCM 2007 OSD is a fantastic way to deploy operating systems, however, like most things SCCM issues can sometimes be difficult to resolve due to the sheer volume of logs to sift through and the dispe...
Migrate Small Business Server 2003 to Exchange 2010 and Windows 2008 R2
This guide is intended to provide step by step instructions on how to migrate from Small Business Server 2003 to Windows 2008 R2 with Exchange 2010. For this migration to work you will need the fo...
Create a Win7 Gadget
This article shows you how to create a simple "Gadget" -- a sort of mini-application supported by Windows 7 and Vista. Gadgets can be dropped anywhere on the desktop to provide instant information, ...
Outlook continually prompting for username and password
There have been a lot of questions recently regarding Outlook prompting for a username and password whilst using Exchange 2007. There are a few reasons why this would happen and I will try to cover t...
Backup Exchange 2010 Information Store using Windows Backup
There seems to be quite a lot of confusion around the ability to backup Exchange 2010 using the built in Windows Backup feature. This stems from the omission of this feature prior to Exchange 2007 s...

Cloud Class Webinars

Avoiding Bugs in Microsoft Access
Alison Balter takes and in-depth look at avoiding bugs in Access. In this webinar you will learn about using the immediate window to debug your applications, invoking the debugger, using breakpoints to troubleshoot, stepping through code, setting the next statement to execute, ...
Top 10 Best New Features in Visio 2010
Scott Helmers gives live demonstrations of the top 10 new features in Visio 2010. This webinar will teach you how to create compelling diagrams by adding shapes to the page with a single click, linking the shapes in a diagram to data in Excel (or SQL Server, or SharePoint), ...
IT Consultant Business Secrets Revealed
Michael Munger, Experts Exchange tech pro and IT consultant, pulls back the curtain on his very successful businesses and answers question on every IT consultant and business owner should know about. He shares secrets on what he did to solve the 5 most common problems in IT, ...
Disaster Recovery and Business Continuity
Quest CTO, Mike Billon, gives an overview of the steps involved in building a dunamic disaster recovery plan. Through case studies and an examination of software/hardware tooles for monitoring and testing, you'll gain a better understandin of where you are, where you want ...
Organize Your Visio Diagrams with Containers and Lists
Scott Helmers uses cross functional flowcharts, wireframe diagrams, data graphic legends and seating charts to teach you: how to ustilize all three new structured diagram components in Visio 2010, the best practices for organizeing shapes in previous version of Visio, how to organize ...
How to Us Objects, Properties, Events and Methods in Microsoft Access
Alison Dalter gives an in-depbth look at objects, properties, events and methods in Microsoft Access. In this webinar you will learn about using the object browser, referring to objects, working with properties and methods, working with object variables, understanding the ...

Watch More

Join the Community

Give a Little. Get a Lot.

Join the community of experts here and help other tech pros by answering question in your area of expertise. You can earn FREE access to all Experts Exchange's premium features and resources.

Join the Community

Answers

by: shawnlehnerPosted on 2009-08-20 at 19:45:06ID: 25148777

jQuery itself is a Javascript library which many people use to create galleries and other web apps but you can't use it directly as a gallery. Maybe what you are trying to do is download a gallery which uses jQuery?

by: DJMgraphixPosted on 2009-08-20 at 19:49:47ID: 25148799

Not sure...

I've always used actionscript in the past which takes me a while to create large galleries.

So right now I'm trying to create a simple.. key word, "simple" gallery because I'm not getting paid to do it.... added to the center of my HTML page.

just add it to a layout table... I can make each picture the same size... but I want some thumbnails... and minimum interactivity...

THANKS,

DJM

by: shawnlehnerPosted on 2009-08-20 at 19:51:11ID: 25148808

Here is a nice... simple... gallery which uses jQuery.

http://www.webappers.com/2008/03/05/galleria-simple-but-nice-jquery-image-gallery/

by: DJMgraphixPosted on 2009-08-20 at 20:02:33ID: 25148857

Nice... people say good things about this one... I'm just not good with JS.

I see:

      // set default options
      var $defaults = {
            insert : '.galleria_container',
            history : true,
            clickNext : true,
            onImage : function(image,caption,thumb) {},
            onThumb : function(thumb) {}
      };

Is this where I add in the source folder of the images?

and Do I have to make all of the images the size that they will be displayed.. or will it auto scale based on the table?

Sorry for asking questions.

Thanks,
DJM

by: shawnlehnerPosted on 2009-08-20 at 20:11:13ID: 25148890

Using JavaScript I dont think you are able to simply use search a folder for images. The sample gallery there just uses the JavaScript for the effects; it looks like all the images are coded into the page to start with. Creating a JavaScript gallery which dynamically loaded images into your gallery would probably need a PHP backend created as well to get a list of the images.

by: hieloPosted on 2009-08-20 at 20:58:08ID: 25149052

>>Is this where I add in the source folder of the images?
No. You need to provide a UL with LI that contains IMG tags. On the IMG tags where you need to provide the path to the image via the href attribute.

<ul class="gallery_demo_unstyled">
    <li><img src="img/flowing-rock.jpg" alt="Flowing Rock" title="Flowing Rock Caption"></li>
    <li><img src="img/stones.jpg" alt="Stones" title="Stones - from Apple images"></li>
    <li class="active"><img src="img/grass-blades.jpg" alt="Grass Blades" title="Apple nature desktop images"></li>
    <li><img src="img/ladybug.jpg" alt="Ladybug" title="Ut rutrum, lectus eu pulvinar elementum, lacus urna vestibulum ipsum"></li>
    <li><img src="img/lightning.jpg" alt="Lightning" title="Black &amp; White"></li>
    <li><img src="img/lotus.jpg" alt="Lotus" title="Fusce quam mi, sagittis nec, adipiscing at, sodales quis"></li>
    <li><img src="img/mojave.jpg" alt="Mojave" title="Suspendisse volutpat posuere dui. Suspendisse sit amet lorem et risus faucibus pellentesque."></li>
    <li><img src="img/pier.jpg" alt="Pier" title="Proin erat nisi"></li>
    <li><img src="img/sea-mist.jpg" alt="Sea Mist" title="Caption text from title"></li>
</ul> 
>>and Do I have to make all of the images the size that they will be displayed.. or will it auto scale based on the table?
That's a good question. From what I saw all those images are 700x438. So the "thumbnails" seem to be 'auto-reduced' (as opposed to actually providing small images). So it's possible it will auto scale. You'll have to try it out (and please let us know).

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:

Select all Open in new window

by: DJMgraphixPosted on 2009-08-21 at 07:39:53ID: 25152275

HIELO:

This is a little more work than I wanted to put into it, but I guess it's not the end of the world.

So once I change the img sources it should work? Nothing ever works that simple. Am I using the JQUERY 1.3.2 file that I downloaded too... or just this new galleria JS?

Thanks,
DJM

by: shawnlehnerPosted on 2009-08-21 at 07:42:09ID: 25152293

You need to include both scripts. The gallery uses the jQuery file you downloaded to perform the fade effects.

by: hieloPosted on 2009-08-21 at 07:49:23ID: 25152378

>>So once I change the img sources it should work?
you will also need to init the plugin upon startup. Look at the source code of the demo page. The $(document).ready(function(){....});

is the part that inits the plugin.

>> Am I using the JQUERY 1.3.2 file that I downloaded too... or just this new galleria JS?
You need both. Just make sure you include the jQuery library first. These jQuery plugins that you find all over the net depend on the jQuery library but the plugins themselves are typically distributed without the core library.

by: DJMgraphixPosted on 2009-08-21 at 07:52:21ID: 25152422

So this wasn't exactly, "easy" for most people.

ok... I made a folder 69_rolls_royce which in in my root folder which contains some images. (image1.jpg, image2.jpg, image3.jpg, etc...)

I put the JQUERY file in the root folder. (jquery-1.3.2.min.js)

The biggest width the gallery can be to fit on my site is 620px wide.

I must have to change a lot more to have this work right on my site? correct?

by: shawnlehnerPosted on 2009-08-21 at 07:57:17ID: 25152475

This really is one of the simplest jQuery galleries I have seen to implement. If you are looking for something that you give a folder and it automatically loads up all the images for you then you are going to need to find a PHP or ASP script; and even that you are going to need to customize the size and style to work with your page.

For your current situation I would take it one step at a time. Change the images to your images and implement the gallery. Once the gallery is working if it is too wide then go from there. Change the styles and image sizes so they better fit the size you need.

by: hieloPosted on 2009-08-21 at 08:08:24ID: 25152615

the easiest way I can think of is to copy the source code of the demo html file. Update the paths of the images. Update the paths to the jquery and galleria javascript files. Get rid of everything else you don't need. BTW: that demo needs:

<div id="main_image"></div>
 
That's where it puts the enlarged image.

1:
2:
3:

Select all Open in new window

by: DJMgraphixPosted on 2009-08-21 at 08:08:45ID: 25152623

I'm definitely trying to take it one step at a time:)

      <link href="../trunk/galleria.css" rel="stylesheet" type="text/css" media="screen">
      <script type="text/javascript" src="jquery.min.js"></script>
      <script type="text/javascript" src="../trunk/jquery.galleria.js"></script>
      <script type="text/javascript">

on this part... I see that I have to change the jquery.min.js to: jquery-1.3.2.min.js ....

what is the trunk/jquery.galleria.js?

by: hieloPosted on 2009-08-21 at 08:21:03ID: 25152737

>>trunk/jquery.galleria.js?
trunk is a folder on that demo site. You probabley don't have that folder. The important part of that line is
jquey.galleria.js. This is the gallery javascript file that you need to copy to your server and then point to your own copy - just like you are doing with the jquery library.

by: DJMgraphixPosted on 2009-08-21 at 08:26:50ID: 25152793

I don't think this is going to work for me.... having to many problems that I don't understand.

The only reason I went with JQUERY is because of another thread... said it was easy.. and said all that I had to do was point it to the image folder...

I could have the actionscript done in like 3 hours for this 55 image gallery.

Do you still think this would be easier for me? I'm sorry i'm making it difficult...

I would prefer pretty much anything else that won't take that long... easy is best :)

by: hieloPosted on 2009-08-21 at 09:34:20ID: 25153478

This is the bare bones of it. You still need to explicitly supply the images.
NOTE: download http://www.monc.se/galleria/demo/jquery.min.js
and save it to your server as :
jquery.1.2.3.min.js

You probably have version 1.3 now, but that does not seem to work with the demo

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>hielo</title>
		<link href="http://www.monc.se/galleria/trunk/galleria.css" type="text/css" />
<style media="screen,projection" type="text/css">
	
	/* BEGIN DEMO STYLE */
	*{margin:0;padding:0}
	body{padding:20px;background:white;text-align:center;background:black;color:#bba;font:80%/140% georgia,serif;}
	h1,h2{font:bold 80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;}
	a{color:#348;text-decoration:none;outline:none;}
	a:hover{color:#67a;}
	.caption{font-style:italic;color:#887;}
	.demo{position:relative;margin-top:2em;}
	.gallery_demo{width:702px;margin:0 auto;list-style-type:none;}
	.gallery_demo li{float:left;width:68px;height:50px;border:3px double #111;margin: 0 2px;background:#000;}
	.gallery_demo li div{left:240px}
	.gallery_demo li div .caption{font:italic 0.7em/1.4 georgia,serif;}
	
	#main_image{margin:0 auto 60px auto;height:438px;width:700px;background:black;}
	#main_image img{margin-bottom:10px;}
	
	.nav{padding-top:15px;clear:both;font:80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;}
	
	.info{text-align:left;width:700px;margin:30px auto;border-top:1px dotted #221;padding-top:30px;}
	.info p{margin-top:1.6em;}
	
    </style>
		<script src="http://www.monc.se/galleria/demo/jquery.min.js"></script>
		<script src="http://www.monc.se/galleria/trunk/jquery.galleria.js"></script>
 
	<script type="text/javascript">
	
	$(document).ready(function(){
		
		$('.gallery_demo_unstyled').addClass('gallery_demo'); // adds new class name to maintain degradability
		
		$('ul.gallery_demo').galleria({
			history   : true, // activates the history object for bookmarking, back-button etc.
			clickNext : true, // helper for making the image clickable
			insert    : '#main_image', // the containing selector for our main image
			onImage   : function(image,caption,thumb) { // let's add some image effects for demonstration purposes
				
				// fade in the image & caption
				if(! ($.browser.mozilla && navigator.appVersion.indexOf("Win")!=-1) ) { // FF/Win fades large images terribly slow
					image.css('display','none').fadeIn(1000);
				}
				caption.css('display','none').fadeIn(1000);
				
				// fetch the thumbnail container
				var _li = thumb.parents('li');
				
				// fade out inactive thumbnail
				_li.siblings().children('img.selected').fadeTo(500,0.3);
				
				// fade in active thumbnail
				thumb.fadeTo('fast',1).addClass('selected');
				
				// add a title for the clickable image
				image.attr('title','Next image >>');
			},
			onThumb : function(thumb) { // thumbnail effects goes here
				
				// fetch the thumbnail container
				var _li = thumb.parents('li');
				
				// if thumbnail is active, fade all the way.
				var _fadeTo = _li.is('.active') ? '1' : '0.3';
				
				// fade in the thumbnail when finnished loading
				thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);
				
				// hover effects
				thumb.hover(
					function() { thumb.fadeTo('fast',1); },
					function() { _li.not('.active').children('img').fadeTo('fast',0.3); } // don't fade out if the parent is active
				)
			}
		});
	});
	
	</script>
 
 
	</head>
	<body>
	<div class="demo">
		<div id="main_image"></div>
		<ul class="gallery_demo_unstyled">
			<li><img src="http://www.monc.se/galleria/demo/img/flowing-rock.jpg" alt="Flowing Rock" title="Flowing Rock Caption"></li>
			<li><img src="http://www.monc.se/galleria/demo/img/stones.jpg" alt="Stones" title="Stones - from Apple images"></li>
			<li class="active"><img src="http://www.monc.se/galleria/demo/img/grass-blades.jpg" alt="Grass Blades" title="Apple nature desktop images"></li>
			<li><img src="http://www.monc.se/galleria/demo/img/ladybug.jpg" alt="Ladybug" title="Ut rutrum, lectus eu pulvinar elementum, lacus urna vestibulum ipsum"></li>
			<li><img src="http://www.monc.se/galleria/demo/img/lightning.jpg" alt="Lightning" title="Black &amp; White"></li>
			<li><img src="http://www.monc.se/galleria/demo/img/lotus.jpg" alt="Lotus" title="Fusce quam mi, sagittis nec, adipiscing at, sodales quis"></li>
			<li><img src="http://www.monc.se/galleria/demo/img/mojave.jpg" alt="Mojave" title="Suspendisse volutpat posuere dui. Suspendisse sit amet lorem et risus faucibus pellentesque."></li>
			<li><img src="http://www.monc.se/galleria/demo/img/pier.jpg" alt="Pier" title="Proin erat nisi"></li>
			<li><img src="http://www.monc.se/galleria/demo/img/sea-mist.jpg" alt="Sea Mist" title="Caption text from title"></li>
		</ul>
		<p class="nav"><a href="#" onclick="$.galleria.prev(); return false;">&laquo; previous</a> | <a href="#" onclick="$.galleria.next(); return false;">next &raquo;</a></p>
	</div>
 
	</body>
</html>

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:

Select all Open in new window

by: jackmcleodPosted on 2009-08-21 at 11:57:15ID: 25154727

I believe what people may have meant in the other thread was:

If you are a programmer, JQuery is easy, which is very true btw.
However, if you dont understand the concept of jquery and how it works, its best to not use it unless you want to learn, which can be very long.

this comment you made shows that your web programming knowledge is quite limited:
"
<link href="../trunk/galleria.css" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="../trunk/jquery.galleria.js"></script>
<script type="text/javascript">

on this part... I see that I have to change the jquery.min.js to: jquery-1.3.2.min.js ....

what is the trunk/jquery.galleria.js?
"

So if you can work things out with actionscript it will most likely be faster for you. Now the question is, do you want to use JQuery absolutely (could be quite long to explain everything) or would you prefer using what you know best (actionscript is probably "better" anyways if you dont have server side scripting like php)?

And to answer:
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="../trunk/jquery.galleria.js"></script>
These are links to external javascript files. You can name it blablabla.js and in your file put the jquery 1.3.2 code and its gonna work.
The .. mean go back one folder, the /trunk/ means go to the trunk folder, and jquery.galleria.js is the file that has the actual galleria code.

<link href="../trunk/galleria.css" rel="stylesheet" type="text/css" media="screen">
This is the external CSS file, giving the page its look and feel

by: DJMgraphixPosted on 2009-08-23 at 10:03:40ID: 25163361

Thank you to everyone who has taken time to try and help me. I will definitely need to learn other gallery's in the future..

You can view this finished product here:

www.djmgraphix.com/classic_cars/69_rolls_royce.html

Thanks Again,
DJM

by: DJMgraphixPosted on 2009-08-23 at 10:05:04ID: 31618682

Thank you for everyones help.

20120131-EE-VQP-002

3 Ways to Join

30-Day Free Trial

For individual users
Instant access to solutions
Ask your tech questions
Start your 30-day Free Trial

Business Accounts

Perfect for organizations
Multiple users
Save over 36%
Create a Business Account

Answer for Membership

Earn free access
Showcase your knowledge
No credit card required
Sign Up to Answer

The Experts

98% positive feedback on 31,087 answers since March 2000. angeliii is a Microsoft Most Valuable Professional for his work with MS SQL Server & Develoment.

He has also proven his knowledge of Visual Basic Programming, PHP Scripting and Oracle Databases.

The Experts

97% positive feedback on 10,752 answers since July 2000. lrmoore has more than 18 years experience in the networking industry.

The six-time Mircosoft MVPs specialties include firewalls, virtual private networking, and network management.

Testimonials

"...and excellent source for support... Kind of like having your very own IT dept." Electriciansnet

Testimonials

"I was apprehensive at signing up at first. However... it has already made my life as an IT administrator much easier." JaCrews

Testimonials

"WOW! You guys have great, active, and knowledgeable people on here." moore50

Business Clients

In the Press

"If you’ve got a question... Experts Exchange can supply an answer.”

In the Press

"...an invaluable aid for both IT professionals and those who require tech support."

In the Press

"where IT professionals provide quick answers on just about any topic"

Business Account Plans

Loading Advertisement...

Question

How do I use JQUERY 1.3.2 on my website?

Subscribe now for full access to Experts Exchange and get

Instant Access to this Solution

jquery

gallery

Web-Based CMS

JavaScript

Miscellaneous Web Development

Trusted by hundreds of thousands everyday for fast, accurate and reliable tech support.

See what Experts Exchange can do for you.

Got a question?

We've got the answer.

Need individual assistance?

Our experts are ready to help.

Want to learn from the best?

Read articles from industry experts.

Working on a long term project?

Store your work and research.

What Makes Experts Exchange Unique?

Trusted by the world's most respected brands.

Faithfully serving IT professionals since 1996.

Related Solutions

Free Tech Articles

Cloud Class Webinars

Join the Community

Give a Little. Get a Lot.

Answers

3 Ways to Join

The Experts

The Experts

Testimonials

Testimonials

Testimonials

Business Clients

Business Clients

In the Press

In the Press

In the Press