Jump to content
Killersites Community
Andrea

Image Slider Not Working

Recommended Posts

I don't know JavaScript, so I have to 'borrow' prefab stuff. I'm trying to implement this one: http://workshop.rs/projects/jqfancytransitions/ on this website I'm working on:

 

http://www.aandbwebdesign.com/octopus/ - username Roatan PW pelican***

 

I've checked everything I know to check.

 

I have a folder called js which holds jqFancyTransitions.js and jquery.js - and yes, all three are uploaded directly into the root.

 

In the head section of my page, I have:

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jqFancyTransitions.js" type="text/javascript"></script>

 

In the HTML, I have:

<div id='slideshowHolder'>
<img src='img/img1.jpg' alt='Spotted Drum'>
<img src='img/img2.jpg' alt='Diving with Groopers'>
<img src='img/img3.jpg' alt='Group Dive Adventure'>
 <img src='img/img4.jpg' alt='File Fish'>
</div>

And the images are all uploaded.

 

and also in my HTML (it's after the above, but it didn't work before it, either) I have:

 

<script>
$(document).ready( function(){
$('#slideshowHolder').jqFancyTransitions({ width: 960, height: 300 });
});
</script>

 

I'm not sure what else to check. The JS files are a direct download from the site, so there shouldn't be any mistakes in there.

 

I guess I could just try a different slider, but I'm trying to figure this one out.

Share this post


Link to post
Share on other sites

It looks to me that you are including jquery twice in the page, which may lead to errors like this. For example, near the top of the document:

 

<script src="js/jquery.js" type="text/javascript"></script>

 

and at the bottom of the document:

 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script src="script.js"></script>

 

I'm betting that if you remove the jquery link at the bottom of the document, everything will start working.

Share this post


Link to post
Share on other sites

It looks to me that you are including jquery twice in the page, which may lead to errors like this.

 

HA!!!! Thank you Ben. That part at the bottom was residue from the first slider thingy I tried and I forgot it was even there.

 

I'm up and running - now just have to fine tune.

 

THANK YOU - THANK YOU - THANK YOU

Share this post


Link to post
Share on other sites

Hi there Andrea :)

 

I've been having a little look at all that gobble-de-gook, which is making my eyeballs spin in their sockets. :blink:

 

Having said that, it's not so far removed from what I did more than a few years back. I can't exactly help with your situation, but I'd like to try this 'FancyTransitions' thingy and see it work in a lightweight page, and then perhaps try it out on yours', maybe?

 

Erm, anyway, I suppose I'd better get cracking then... :rolleyes:

Share this post


Link to post
Share on other sites

Er, this is going to take longer than I thought...

 

I can't for the life of me understand why yours' isn't working. I have got a transition of sorts, but it's very fishy. :lol:

 

At first I tried to break up one of the images into 3 separate pieces 3x320, but because of the way it's set up to handle IDs, I think maybe using a class isn't going to work.

 

Erm, the only thing I can suggest it to perhaps place the following script between the head tags...

 

<script>

$(document).ready( function(){

$('#slideshowHolder').jqFancyTransitions({ width: 400, height: 300 });

});

</script>

 

 

...I'm not sure what that other following script is that you have in the home page is for...

 

<script>

 

$('#ft').jqFancyTransitions({ navigation: true, links : false });

 

</script>

 

 

Erm, anyway, I'll keep at this for a little while until something else happens. Something good, I hope. :unsure:

Share this post


Link to post
Share on other sites

...On 2nd thoughts, forget about everything I said...

 

:rolleyes: I did not see Andrea's answer to Ben's comment. Silly me. :rolleyes:

 

Thanks for trying to help - now just ignore the ugliness of the design, it's still being invented....

Share this post


Link to post
Share on other sites

Hi there Andrea :)

 

I've noticed that if you use 3 images at once you end up getting a rather nice effect, though I have no idea as yet if it works in all browsers known to man...

 

<div id='slideshowHolder'>

<img src='img/img1.jpg'>

<img src='img/img2.jpg'>

<img src='img/img3.jpg'>

</div>

 

 

...For some reason though, I cannot get it to transition more than 3 images. :huh:

Share this post


Link to post
Share on other sites

...Ah, so that's why it wasn't working. That old suggestion of mine about putting the scripts in the head tags has been frelling things up.

 

Basically, I copied your markup and the transitions are working as they should be, or as they are on your octopus page.

 

I knew I could do something to help -- me! :lol:

Share this post


Link to post
Share on other sites

Great, glad to hear that removing one of the jquery scripts fixed it. Usually for errors involving jquery, I look for three things:

 

-- If jquery is being included more than once

-- make sure all the files are being included properly and the paths are working

-- make sure that all the files are valid, working copies (in case they got FTPed to the server incorrectly/there was some sort of error) and that they are being initialized correctly using document.ready.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×