Installing a Jquery Gallery Plugin

220 views Asked by At

I've tried to install two of these now, and neither has worked, so I'm quite sure that the problem is me and not the plugins, but I've also watched a half dozen youtube videos and re-read the instructions several times and I still can't make it work. This seems like the kind of thing someone would have clarified already, but I haven't been able to find it.

I've got a test version up at http://www.sitesupandrunning.com/links.html . I've tried test functions and they worked, so I think my jquery is hooked up correctly. I originally copied and pasted the exact code posted by the plugin author, so it doesn't seem like there should be any errors there. So it seems as if it would be narrowed to the images, but the author had placeholder filenames, which I've just switched out, and with jquery disabled the thumbnails show up and are linked correctly, so I know the images are labeled as their supposed to be.

My guess it that the problem is simple, but none of the tutorials for beginners seem to offer anything useful for installing this kind of plugin.

Any help would be appreciated -- Even a tutorial that actually addresses using this kind of plugin, not just a plugin from the jquery home page.

2

There are 2 answers

2
Goose On

I use jQuery Cycle, and it is quite straightforward. Here is a simple markup:

<!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>Test</title>
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript"> 
$(document).ready(function() {
    $('.transitionPictures').cycle({
        fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
    });
});
</script>

</head>
<body> 
        <!-- TRANSITION SLIDESHOW -->
        <div class="transitionPictures">
        <img src="image01.jpg" width="400" height="300" alt="" />
        <img src="image02.jpg" width="400" height="300" alt="" />
        </div>
</body>
</html>

You can visit the jQuery Cycle site for many more options to add to the ready script.

0
Rid On

If you are looking for specific jQuery gallery solution, you should try Cincopa website slideshow. They have about 5-6 different jQuery gallery skins. You will probably find the design that fits your website