PDA

View Full Version : Unable to run Utimate slideshow v2.4



frontliner
06-05-2011, 12:58 AM
1) Script Title: Ultimate Fade-in slideshow (v2.4)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

3) Describe problem:

Unable to run it.
I already tried successfully Presentational Slideshow Script and Flexi slideshow but i can't run the Ultimate one...
I'm trying to use it on x-cart v 4.4.3 without success on IE, Opera or Chrome.

I can only display the static linked images from the last part of the script but not the slideshows... i 'm confusing with the logic of that script. Could it be possible to have it simplified to display only one slideshow just like your other slideshow scripts as this one seems to try to display a few samples all together ?
I've read the thread initiated by gstapleton here http://www.dynamicdrive.com/forums/showthread.php?t=62488
...i'd like to display the slideshow same as he is using it on his website (very professional style) for my webshop.

Can you help John ?

Thank you very much

jscheuer1
06-05-2011, 01:26 AM
The script allows for more than one slideshow per page. It doesn't require it.

Take a few deep breaths, follow the instructions on the demo page (read it thoroughly), especially the one about downloading (saving) the fadeslideshow.js script and helper images. Put them in the same folder as your page. And instead of using the two on page calls (from the code block labeled "Simply add the below code inside the <HEAD> section of the page"):


var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
["http://i30.tinypic.com/531q3n.jpg"],
["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})


var mygallery2=new fadeSlideShow({
wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
["http://i30.tinypic.com/531q3n.jpg"],
["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
],
displaymode: {type:'manual', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "always",
togglerid: "fadeshow2toggler"
})

use just one:


var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
["http://i30.tinypic.com/531q3n.jpg"],
["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})

Set the dimensions property [width, height] properly for your images. Set the images, any links and descriptions to be your own. Set the other options how you want them. The slideshow you liked used:


var mygallery = new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [641, 344], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["Images/Templates/HomePage/HomePageRotation1.jpg", "ForYou/Default.aspx?Section=Smart Money Choices", ],
["Images/Templates/HomePage/HomePageRotation2.jpg", "http://www.youtube.com/watch?v=9aqmZ_1drDg", ],
["Images/Templates/HomePage/HomePageRotation3.jpg", "MeetTreasury.aspx?ViewBio=1&BioId=1", ],
["Images/Templates/HomePage/HomePageRotation4.jpg", "http://www.ohiochannel.org/MediaLibrary/Media.aspx?fileId=128636", ] //<--no trailing comma after very last image element!
],
displaymode: { type: 'auto', pause: 2500, cycles: 0, wraparound: false },
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 1000, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})

If you still need and/or want help, put up a demo of your best effort somewhere on the web where we can see it and give us a link to it. I'm sure we can sort out any problems you might be having at that point. But there's a good chance that just following the directions on the demo page and doing as I say in this post will 'get it' for you.

frontliner
06-05-2011, 02:42 PM
John,

Thank you for your reply.
I've just tested again but nothing has changed.

My problem is not located in that code to put in the header as i already tried it previously in the same way as you explain.

What i don't understand is the logic of the last part of the script (step 2) in the demo.

As i understand that code has to be placed (like your other slideshow scripts) onto the page where you need to display the slideshow.

Problem is first i have copy/paste all your demo code as is but nothing was displayed excepted those images that are corresponding to a 404 error on tinypics website :

<img src="http://i31.tinypic.com/302rn5v.png" style="border-width:0" />
<img src="http://i30.tinypic.com/lzkux.png" style="border-width:0" />

So, it is precisely this last part of the script that i don't understand.

For my opinion if i put simply :

<div id="fadeshow1"></div>

i thought it should launch the slideshow or at least see something, also if i put :

<div id="fadeshow2"></div>

<div id="fadeshow2toggler" style="width:250px; text-align:center; margin-top:10px">
<a href="#" class="prev"><img src="http://i31.tinypic.com/302rn5v.png" style="border-width:0" /></a> <span class="status" style="margin:0 50px; font-weight:bold"></span> <a href="#" class="next"><img src="http://i30.tinypic.com/lzkux.png" style="border-width:0" /></a>
</div>

i should also normally see something happen... but i don't see nothing
excepted those two linked 404 tinypics placeholders and nothing else. Despite i modify or rename fadeshow1 in fadeshow2 and fadeshowtoggler...

I cleary understand the code to put on the header but not this last part that (i guess) should trigger the slideshow to appear where to be displayed.

What those two img src have to do with the slideshow ?

Can you please rewrite the code for the step2 corresponding to the code you gave here above to simplify the script ? ... also explain how it should work ?

...and what means those three images in the js file ?
['x.png',7,7], ['restore.png',10,11], ['loading.gif',54,55]]
...do i have to resize or replace wiht my own ?



Thank you...

jscheuer1
06-05-2011, 04:03 PM
Please post a link to a page on your site that contains the problematic code so we can check it out.

frontliner
06-05-2011, 06:46 PM
John,

I can't publicly post a link to the real page at this time as the shop is still under construction and order processing in testing mode.

Can i send you the link by private message ?

...or just you can post the corresponding step2 code that should go with the first part you posted above. Maybe is it a hosting configuration problem ?

Also it seems that the Ultimate Slideshow is quite difficult to have working on x-cart as far as i could read in our forums.

...if i replace every occurence of fadeshow2 with the expression fadeshow1 in stept2 code, it should work, no ? :confused:

Thanks

jscheuer1
06-06-2011, 12:03 AM
Send me a PM with the link. You need 2 more posts to qualify for access to the forum's PM system. So respond to this message twice, then PM me the link.

There may be a minimum time as member requirement for the PM as well. If you have any problems, let me know. I can always email you at your address as listed in your member profile.


About your message. This is the first you mentioned x-cart. I'm not at all that familiar with that. But I'm sure it's not as bad as it sounds in the forums. My reasoning is that, it's probably just like here. We almost exclusively get the people who are having problems. There are bound to be hundreds, thousands, maybe even more using the scripts with no problems. We almost never hear from them.

frontliner
06-06-2011, 11:38 AM
Thank you very much for your help.

frontliner
06-06-2011, 11:43 AM
I PM you as soon i'll be allowed to do it.

It would be interesting to show you what kind of problem some x-cart admins seems to have with this script but it is a private forum so i can't post the link to those topics.

Thanks again.

jscheuer1
06-06-2011, 02:29 PM
Apparently you still cannot PM or haven't tried yet (you should have been able to right away unless there's also a time limit), so I'll send you an email at your listed address in your profile to get the ball rolling.

jscheuer1
06-07-2011, 04:14 PM
I've got the link now. I got it from your PM.

Anyways, this looks like a problem on the server side. Where there should be a call to the slideshow, there's this (from the served source code of the page):


<script type="text/javascript">

var mygallery = new fadeSlideShow(,
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 1000, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})

</script>

Either that or a really bad typo.

You can always view the served source code of the page by viewing the page in the browser and then using the browser's 'view source'. That will show you weather or not your server side stuff is doing what you expect it to. It shows what HTML code, scripts, css etc. the server is sending to the browser.

frontliner
06-07-2011, 05:40 PM
Maybe you got some error codes while i was working on the files at the same time these two last hours... sorry for this.

Could you please watch again (i will not touch it now) ?
I've just left the line of code <div id="fadeshow1"></div> to call the script and deleted the rest.
Normally the slideshow shoud appear under the comment : slideshow goes below this line
I've watched at the source code under chrome, if i point under the comment line where the slideshow should appears (inspect element), then in the code window i point the div call code, i see this value in the above window :

div#fadeshow1 [710x0]

...so if fadeshow is defined as 710x0 px it explains why it is not visible (if i well understand).

I don't see anymore the code you were talking about (what is part of the header code and should not appear there).

From where could come that 710x0 ?
Also, do i have to keep images parameters as they are in fadeslideshow.js
At this time that line of code is still unchanged :
controls: [['x.png',7,7], ['restore.png',10,11], ['loading.gif',54,55]], //full URL and dimensions of close, restore, and loading images

btw, i don't understand what is the use of those three images (i have placed them all together in the same directory with fadeslideshow.js where is header file containing the main code)

Can you please take a look again with chrome (to have the same display as i have) ?

Thanks.

jscheuer1
06-07-2011, 07:19 PM
Still the same problem.

frontliner
06-21-2011, 01:37 PM
John,

The problem has been solved wiht the help of experienced users from the x-cart forum. Problem was just that js file and path to images were wrong to be executed in the default directory contrary to what i thought.

Just need your help again to improve the display :

I would need the slideshow to be displayed over a fixed loaded background image bigger than the slideshow with a 'javascript required' message. So, when visitors don't have js enabled they will see that default image but not the slideshow and when the slideshow turning it is displayed on a kind of black screen... Is it possible directly with the fadeinslideshow code otherwise how to integrate them together (fixed image + slideshow) ?

Thank you.

jscheuer1
06-21-2011, 03:50 PM
I'm not sure exactly what you're after. But probably (if you're using the fadeshow1 id for the show and otherwise using the part of the setup where only the script sets the slideshow dimensions, which is how the instructions are on the demo page):


<div id="fadeshow1"></div>

will not appear at all (default width for div is 100%, default height is 0) for non-javascript users. If you want alternate content for non-javascript users, add:


<div id="fadeshow1"></div>
<noscript><div>whatever</div></noscript>

That 'whatever' can be an image tag, or anything you like. It will only be seen by non-javascript users and they won't see the fadeshow1 div.

Further refinement is possible, as are other approaches. But simplest is best if it works out for you.

frontliner
06-21-2011, 11:33 PM
That code is interesting but not exactly what i need because based on a condition.

To explain more clearly, say that i simply want to display a 600x400px default image (js enabled or not, for both).

However, what i would need, when js enabled, is the slideshow to appear centered just in front of that default image. However, if possible i would need the slideshow to be displayed in a smaller size (say 400x300px) but centered in front of the background default image.

...problem would be to center the slideshow on a larger fixed image, as the reference point should be the center of the background image.

...would maybe interesting to integrate a fixed src linked background image in fadeinslideshow.js itself as an additional display option to the next version ? ...i had that idea when i saw that your script can display multiple slideshows and linked images onto the same page (but not exactly in the way i thought).

jscheuer1
06-22-2011, 05:12 AM
That's really more of a markup/style question and fairly simple to do. The slideshow will be of whatever dimensions you set it to here:


var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [400, 300], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
["http://i29.tinypic.com . . .

In this case 400x300, like you put in your post. So you make a container:


<div id="sContainer"><div id="fadeshow1"></div></div>

Then in your stylesheet:


#sContainer {
width: 600px;
height: 400px;
background-image: url(whatever.jpg);
}

#fadeshow1 {
margin: 50px 0 0 100px;
}

Just make whatever.jpg a 600x400 image, and you're in business.

Interestingly, you may make (valid in HTML 5) a separate stylesheet later with a separate image for non-javascript users:


<noscript>
<style type="text/css">
#sContainer {
background-image: url(someother.jpg);
}
</style>
</noscript>

And if you want whatever.jpg to appear to show through the slideshow as it's loading add this to the first stylesheet:


#fadeshow1, #fadeshow1 .gallerylayer {
background: black url(whatever.jpg) center !important;
}

For best results (faster loading), make whatever.jpg of as few bytes as possible.