Jump to content

Image Slider Not Working


Andrea

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.

Link to comment
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.

Link to comment
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

Link to comment
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:

Link to comment
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:

Link to comment
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....

Link to comment
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:

Link to comment
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:

Link to comment
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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...