Interested in slideshow on a web page ive seen

[theremotedr]

Happy New Year in advance members.
I have seen a web page which i like the look of there slideshow.
There are many transitions of the way the images are loaded.
Here is the page in question.
http://www.onlyda.com/English/Html/main.asp

Here is my page which has a bog standard slideshow where i would be interested in replacing into the given area.
http://www.theremotedoctor.co.uk/

Please advise the code that i would need to make it work for me.

Many thanks

[Beverleyh]

Those kinds of slideshows are usually called something like "conveyor belts" or "continuous reels" so try Googling those terms for related slideshow scripts, tutorials or plugins.

[theremotedr]

Hi,

Can we not extract there code ?

The item is at the top of the page NOT the one below which just feeds right to left.

[theremotedr]

Check this small video.

http://www.mediafire.com/download/yhi7byuj17zvgch/onlydaslideshow.xesc

[Beverleyh]

I only see the one with the keys moving along in a conveyor belt.


Can we not extract there code ?Technically, yes, but morally, legally, and through respect for other web developers, I'm going to say no - we can't really support that here. At the end of the day, somebody else has written, possible paid for, the code and unless they provide a download link or explicitly say that their code can be copied and used on another site, commercial or otherwise, it wouldn't be right to use it without their permission.

If you have a look in their source code and they provide usage details or a source link for the script, feel free copy/download it according to their instructions.

You could try contacting them directly and asking for a copy. You never know, they might hand it over FOC.

The safest solution would be to do a Google search for something similar using the keywords already suggested. That way you'll get a copy of usage terms, usage/instructions/docs, cost/fee if applicable, and the original source code.

[Beverleyh]

Check this small video.

http://www.mediafire.com/download/yhi7byuj17zvgch/onlydaslideshow.xesc
Sorry, I can't download on iPad

[theremotedr]

Ok
On the page in question there are 2 slideshows.
Its the top one NOt the one below.

[Beverleyh]

It's not showing on iPad so unfortunately I can't comment. My previous comments still apply though - try Googling for a similar script, ask directly, or view the source code for clues on where it originally came from.

[theremotedr]

Ok
I now understand.
I hope Coothead will read this.

Thanks for your time anyhow.

[Beverleyh]

I'm not sure why you've specifically named coothead at this stage. If you choose not to follow my advice to Google for a free and open source script, that's entirely your choice, but DD cannot support your request to extract somebody else's code, where permission has not been explicitly granted, for use on your own site. I would hope that our more helpful and long term members would feel the same way about this to further promote professionalism, trust and courtesy amongst fellow web developers.

[theremotedr]

I didnt mean to do anything wrong.
I mentioned the user as they have helped in the past a few times
I will look around and see what i can find but did like that slide.

[theremotedr]

I have now found something which is close.
Taken from here http://www.menucool.com/slider/javascript-image-slider-demo1
I have added the code/files etc into my test page but need some assistance please regarding a little tidy up of redundant code.

As a guide here is my original index page http://www.theremotedoctor.co.uk
And here is my test page http://www.theremotedoctor.co.uk/slider.html

Ive taken some code out but some was left in,this is where i need the tidy up.
Also you can see that the images are breaking out of the border "see original index page"

[Beverleyh]

I can't see much as I'm on iPhone (are you aware that the slider doesn't show there or on iPad? Yet I'm assuming it's there because the page seems to be blocked by asset loading) but as far as cleaning up redundant code goes (and I'm not sure what is considered redundant to you), try setting up a reduced web page following the instructions from the slider demo docs. The docs hopefully explain which params are and aren't needed (assuming this is what you mean by "redundant code"), depending on the effect/transitions you're using. Alternatively, include all the recommended/demo params and then remove them one by one to see what difference it makes; if it removes an undesirable effect or is to enable an unwanted feature, leave it out; if it removes or changes a behaviour that you like/need, put it back. You can also use the same logic for removing issued CSS. Sometimes the only way to test these things is through trial and error (and sometimes there's a lot of fiddling and testing involved).

2nd issue - I would say that's the images are breaking out of the border because the slideshow isn't designed to be responsive. There is a note on the page to use Ninja slider for responsive environments instead.

[theremotedr]

Ios device is not a problem.
Ninja page is 404

Images out of border is on pc
Redundant code means left over from the old slide show that was there.
Some i remove then causes issues so i left it in thinking others may see where/why is the issue.

[Beverleyh]

You can access the Ninja slider scripts through the menu.

Can you trace your steps backward to remove the old slider? Try going back to the source site, check what HTML/JS/CSS was used from the original docs, and then remove it that way. If it came as part of your freebie site template, again you can try checking the original site for a version that doesn't include the slider scripts/HTML/CSS and reverse-engineer it that way (compare the source code and script packs to manually remove what you no longer need).

[theremotedr]

ok
I am trying to work through it now.

Thanks

[coothead]

Hi there theremotedr,


here are few free examples for you to try...


http://wowslider.com/html5-slideshow-luxury-slices-demo.html
http://www.cssscript.com/demo/simple-javascript-css-image-slider-slice-transition-effect/
http://www.skitter-slider.net/



coothead

[theremotedr]

Hi
Thanks for that.
I've added some code to my existing page but some of the old code is still there.
It's cleaning a touch.
Looking on my test page only issue I can see is the image bursts out of its frame/container etc.
http://www.theremotedoctor.co.uk/slider.html
Other that that I think it's done.

Or do you advise to look at the 3 above and start again.
I would still be unsure as to know exactly what to remove from the old slide code.
Hence the same place as where I'm at now.

[Beverleyh]

Looking on my test page only issue I can see is the image bursts out of its frame/container etc. Looks like you're still using the menucool slideshow that isn't designed with responsive features. There's a note on the page you posted to use the responsive Ninja version instead (the scripts for which are accessible in the menu of that website)


Or do you advise to look at the 3 above and start again.

If you would like a responsive slider, you would need to either work at modifying the existing script/CSS, or preferably change it for an already-responsive script, such as the Ninja slider provided on the site you linked to (menucool), or one of the 3 examples that coothead suggested.

[theremotedr]

Hi,
On my ipad there is no problem other than the image size.
Having said that the same problem is on the pc.

This i believe is due to some old code still in place.
If this old code was corrected then the image size would be fine & also on the ipad would be fine.
Im going to read the advised links but im sure im going to have the same issue becuase of my old code.

[Beverleyh]

Ok, so try to target your old code first. The developer toolbar would greatly assist you in this - F12 in most common browsers. If you're unsure how to use it, hit Google for a tutorial, but the basics are that you would activate the toolbar and then select/inspect an element, or drill down through the markup manually in the bottom pane, then use the 'styles' pane on the right to edit the CSS. You can tick the boxes to deactivate values, type over existing values, and also insert new rules/lines to do live edits on the fly, directly in the browser. It's really very useful.

If you suspect that you have lots of excess markup, try removing it back to the very core structural stuff (again, it might be worthwhile referring back to your original template - from a backup or a fresh download), and then gradually build up the page again. I've done that many times, even on a day-to-day basis (to some degree) in my full time work, so I appreciate that it's not much fun, but sometimes you have to take the bull by the horns and go back to basics.

[theremotedr]

Hi,
Didnt get anywhere so looking at original code.
Ive changed it from slide to fade but how/where will i find the speed setting.
Here is my page http://www.theremotedoctor.co.uk/
Here is the page that show variations https://github.com/woothemes/FlexSlider/wiki/FlexSlider-Properties

Im looking for slideshowspeed & animation speed but cant find them ?

If you could advise where they would be and how i could find them myself.

Thanks

[Beverleyh]

Im looking for slideshowspeed & animation speed but cant find them ?https://github.com/woothemes/FlexSlider/wiki/FlexSlider-Properties Read through the params on the GitHub page til you find something that sounds like it fits.

Tip: Do a 'find in page' search (CTRL+F on Windows?) using a common/likely/logical action word. Example: if you're looking for a parameter relating to speed, try searching on "speed".

[theremotedr]

Ha Ha,
I did read that page but i did not find it in any my files.
I was looking to find out which file had it in.
Looking through the files i didnt come across it.

[styxlawyer]

Hi,
.
.
Here is my page http://www.theremotedoctor.co.uk/
.
.


Sorry to butt in to this thread, but can I just say that you still have two instantiations of the jQuery library in your page. The first is in line 31 and the second in line 327. You should remove one of these as they may conflict with one another.

[Beverleyh]

Ha Ha,
I did read that page but i did not find it in any my files.
I was looking to find out which file had it in.
Looking through the files i didnt come across it.i imagine they're extra parameters so you would need to define them in your flexislider initialisation.