JQuery Slider Help

  • 1
  • Question
  • Updated 7 years ago
  • Answered
Ok so I'll be honest here, I'm a complete newbie at JQuery. I really have no idea what I'm doing at the moment.

I've downloaded this source code http://bxslider.com/ for a really neat image slider that I'd like on my index page of my site. I have followed the instructions the site has given. I have uploaded the files to my file manager, and inserted the two code snippets they provide. However, I'm not sure where to go from here.

I'd really appreciate someone who is experienced with JQuery and also has some time and patience to please help me out.

Stuff that might be important:
- I'm going to make about 4 or five slides, each 870px by 200px
- The files I uploaded to the manager are all in one folder named 'JQuery'

Thanks in advance for the help!
Brandon
Photo of Brandon

Brandon

  • 243 Posts
  • 33 Reply Likes
  • unsure

Posted 9 years ago

  • 1
Photo of kade

kade

  • 27 Posts
  • 0 Reply Likes
I have worked it all out now :) the menu works and looks great. But since i removed my original menu bar, how do i bring back the bottom of the page navigation bar back? The menu has been placed in the heading section. Can i place images with links the the left of my menu bar?
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
Hello kade,

Well done on working it out!

If you have removed the default navigation, then this will remove the bottom links. Instead, what you could possibly do is restore your default menu and then use CSS to remove the top links and leave the bottom links intact.

You can use the Column Divider to set up the images with links on the left side. Would that work for you?
Photo of kade

kade

  • 27 Posts
  • 0 Reply Likes
Thanks for all your help Sanja.

I was wondering about images in the top header by the side of my navigation...?
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
Hmm.. I wonder if you added into your page heading code:

background-image url(resources/yourimage.jpg)

Not sure if that would work or not?
Photo of LauraB

LauraB

  • 12 Posts
  • 0 Reply Likes
Brandon (or anyone that assisted him) how did you get the bxslider to work? I'd really like this is on my site - or any carousel feature. Yola - if you are a reading this - a simple carousel feature is a must!!!

This is the one I'm trying to install: http://bxslider.com/
but I'd take the help getting ANY carousel feature to work.

THANKS!
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hello LauraB,

Where are you getting stuck with this?
Photo of LauraB

LauraB

  • 12 Posts
  • 0 Reply Likes
Basically, the actual instructions.

1. download the file (got that)
2. Where do I put the file on my Yola account? In the file manager?
3. Click on "Style" and then "edit custom CSS" and then place the code in the area (got that, but do I need to change the code at all?)

That's all it says to do... but I didn't put in my photos yet... so do I then do these steps:
4. Insert html on page where I want the carousel feature
5. Put code in and add

I just need a step by step for yola! :)
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Laura can you let me know the address of the instructions please?

I'm looking at the instructions on the site and I think you may have another publication.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
If you are following the instructions on bxslider site then using method 1,there's nothing to download. For method 2 there is a download.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Unless you want the slider on multiple pages there isn't a need for editing the CSS.

All you need to do is to add and edit the image specs and add the js links to your page as directed.
Photo of LauraB

LauraB

  • 12 Posts
  • 0 Reply Likes
excellent! I did method one and it worked! (yay!)
But... the arrows are not appearing, instead there is a little text that says "prev" and "next" under the image... any way I get those nice little arrows instead?
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
They may be bundled somewhere. I'll have a look.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi Laura,

Sorry I was off line. Had a local cell of the 4G system blasted by lightning and it is a solo cell so nothing to fall back on to feed my connection.

The coding for the placement of the images is within the JS. The url is incomplete in that it refers to a relative address and the images just aren't there. Not included in the code files of Method 1 and I don't know about method 2. This is not a big problem and quite an easy fix.

If you can locate the buttons through the reference that Mik gave you and put them all in a folder then we can go again from there. If you can't locate the buttons then you should be able to find replacements by a search looking for "previous and next arrows for webpage sliders". There will be lots. Look around the Boxslider demo as well for other graphic features that you may wish to include. The code is all there I think in the relevant js files so you just need to add the images to the image folder with the correct names. The names at this stage are not so important so just label them with a meaningful name and we'll come back to renaming them accurately.
Photo of LauraB

LauraB

  • 12 Posts
  • 0 Reply Likes
sorry - this is the site I got the info from:
http://bxslider.com/
Photo of mik

mik

  • 172 Posts
  • 3 Reply Likes
There is a link on the site, which takes you to a forum like set-up page, where you can find all the buttons etc.

I changed the prev and next text to images of 2 buttons which I added in my filemanager I then opened up one of the Js files in NOTEPAD and altered the source of the button, then saved again as JS file and reloaded to the filemanager.. make sure to refresh your page...

A friend of mine gave me a bit of CSS code to space the arrows... but I'm yet to be able to add the buttons as they appear on the demo of bxslider website.

YOLA is ace.. very versatile.... but they should consider adding sliders as a widget feature... that would be amazing!!!!!! shouldn't be too hard... a few weeks ago I had no idea what HTML looked like, never-mind tampering with CSS.

Good luck Laura and if Gop or anyone else has any more tips, that would be great!

Mick
Photo of LauraB

LauraB

  • 12 Posts
  • 0 Reply Likes
thanks for trying to help - I just can't seem to figure it out. :(

I got the js file, i searched for "prev" and "next" and replaced the code with the image source code.

Then I saved the file as a JS file and uploaded it into a folder in my file manager.

No such luck. :(

Maybe Yola could just get a widget for this!

I'm frustrated... If you have any other suggestions let me know!

I'm thinking I need to put something in my CSS, I did not change my CSS at all... I just added an html to my page, so maybe that's the issue. Any suggestions are welcome!
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
See the bottom of the page for the grey arrows mentioned.

There is nothing that you need to style so there is no need to change any of your CSS. CSS would effect a change in appearance not a change in function in this situation. The change in function is all done by a selection of the mini code that you add below your linked js files (already the default is there).

What's missing are the sprite images which are your next or previous arrows. I have located the grey ones as you see on the demo and placed them at the very end of this thread. All you need to do is place these in your "images" folder and then it should work.

You do have more options but we can work on this after you get this part displaying as you wish. Everything else is really small modification or replacement of tiny amounts of code and possibly uploading additional sprites.
Photo of LauraB

LauraB

  • 12 Posts
  • 0 Reply Likes
I did the easy method 1 - so I'm not sure where I would change the code for the button? Can you share the code you used?

(I can easily make arrows and put them in my file manager, I just don't know where to change the code)

And for yola adding a widget... I vote yes!

This is all the code i have now:






Photo of mik

mik

  • 172 Posts
  • 3 Reply Likes
your code isn't showing up Laura...

you will have to try and access the .js files... try each one.. there are 2 or 3 I think...

right click and open with NOTEPAD then you should see the code and where/what to access...

you can also try to look through https://github.com/wandoledzep/bxslider but it's tricky... for me it was... It can be a little frustrating...

there are js. files you need to add to your filemanager and ONE OF THEM is actually found on the bx slider website, and the code directs you to that js. file... I ended up downloading this file and changing the path to where i ended up storing it... in my yola file manager....

This is the code I have in place for one of my slides (if it will allow me to add it)














Photo of mik

mik

  • 172 Posts
  • 3 Reply Likes
ok, it didn't work.. see image
Photo of LauraB

LauraB

  • 12 Posts
  • 0 Reply Likes
THANKS! did you use method 1 or method 2 for install?
Photo of LauraB

LauraB

  • 12 Posts
  • 0 Reply Likes
3 more things:

1. did you use method 1 or 2 for install
2. is the image of the code ALL of the code you are using, simply placed in an html on your yola page?
3. can you email me the code - [ borkenhagen.06 @ gmail.com ]

THANKS!
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes




Here are the left and right arrows. In fact they are sprites, sort of like compound images. Depending on the clever coding applied either the top half or the bottom half of either shows. This corresponds to either a mouseout action or a mouseover action.

The names as they are labelled are used in the program of the demo so I presume it will be the same for the user version.

Save these 2 ( Right click and "Save image as...") and place them in your "images" folder and they should be addressed directly from there without modification. Hoping this works Laura.

Finally a good reference page for various configurations of the slider http://bxslider.com/images/icon_arrow.... I know a strange URL but seems to be correct or at least shows the various configs ???
Photo of mik

mik

  • 172 Posts
  • 3 Reply Likes
Hi Laura, only now got a chance to reply...

Gop, you've shed some more light on to this for me... but it's not really clear to me either...

Laura, I will email you the code I attached as an image in prev. comment. I'll get it over to you asap, as I need to change one or 2 things...

Again, if any yola team are reading this, please consider putting it forward to the dev team that it would be great to feature a slider widget... best idea I've heard all year.. almost.

Michael
Photo of Laura Thomas

Laura Thomas

  • 4536 Posts
  • 211 Reply Likes
We have logged this as a feature request mik, we do recognize that it would be a nice addition to the Sitebuilder. In the meantime, I hope you are able to obtain the look you are after with your code.
Photo of mik

mik

  • 172 Posts
  • 3 Reply Likes
sweet, I'm good, it was LauraB that had an issue... but I do think it would be awesome to have a slider feature... it adds dynamics to a page.

@LauraB - please pop on to the forum again to let us know whether you got it working... so frustrating reading forum posts that are loose ends.. (I hope you got my email with the code) Hope it works out.

Mick
Photo of Brandon

Brandon

  • 243 Posts
  • 33 Reply Likes
Hey everyone! My apologies for responding so late! Does anyone still need help with this? It's been a little while since I last implemented this slider but I'm sure I can still help anyone who needs it :) Let me know.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hello Brandon,

Thanks for getting back. I think that we are lost in implementing aspects of this such as the indicator arrows and such. Not able to find the code that allows this.

Found the codes for the various presentations but not the styling.

Would be grateful for your lead on this.

Thanks. Gop.
Photo of mik

mik

  • 172 Posts
  • 3 Reply Likes
I used some CSS to space the buttons apart, but I was unable to add them to the slider the way that they are expressed in the demo slider. I have 3 of these sliders running on one of my websites... I've sent LauraB an email with the the code I used to direct the js. to function... waiting to hear back from her if it worked. If you have any ideas regarding the button padding etc. then please share, thanks Brandon.

Mick
Photo of LauraB

LauraB

  • 12 Posts
  • 0 Reply Likes
I was unable to get it to work, I got the slider to work, but not the arrows. I tried naming them different things, but ... not such luck! I can't figure out what I'm doing wrong. I placed all the files into the file manager with no changes, then I put the code in an html widget on the page I wanted it to appear - the photos work but the arrows do not. thanks for trying to help! Perhaps I'll just have to wait for yola to get a nice simple slider.
Photo of rofasia

rofasia

  • 35 Posts
  • 0 Reply Likes
Hi all/Gop, its Klaus again. I spend a couple hours on familiarizing myself with the Jquery and got everything done in my test page http://rofasia-test.yolasite.com/ except the arrows. Somehow they are stuck at the bottom of the slider instead of nicely left and right. I dont know anything (yet) about CSS so if anyone has any advise how to move the arrow sprites to either side of the picture and display properly I would appreciate it. Have a great weekend!
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi Klaus,

I was unable to relocate the images as well. I finally moved on to Easyslider which is similar not quite as smooth but OK.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
I haven't tried this Klaus and you may like to see:

Using a column divider add three sections ie: a column divider within a section of a column divider. To the left section add your "prev" button, to the centre section your slide show and the third section your "next" button. You can use margin settings on an image widget to adjust the vertical position of the buttons??

The buttons themselves are sprites so will need some relevant code to activate the appearance/disappearance of the active/non-active mouse-over.
Photo of rofasia

rofasia

  • 35 Posts
  • 0 Reply Likes
Thanks Gop, great suggestion, I will try it out.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
You have to show us the outcome Klaus.
Photo of rofasia

rofasia

  • 35 Posts
  • 0 Reply Likes
I just gave the site a complete facelift www.rofasia.com - have a look! In the end I decided to go without the arrows for the moment but will give it a try at the next opportunity.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Excellent Klaus. As a banner it wouldn't be important to add arrows but rather a personal preference of yours. It looks great.
"chumriep leah"
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
You should submit your site to Yola for consideration as a featured site!
Photo of Laura Thomas

Laura Thomas

  • 4536 Posts
  • 211 Reply Likes
I agree, your website is stunning, and we would love to feature it on our blog! If you're interested, please take a few minutes to tell us about your site building process and submit it through our Support Form.
Photo of rofasia

rofasia

  • 35 Posts
  • 0 Reply Likes
Hi Laura and Gop, wow this is fantastic! Its really my wife Valerie who owns the company - I just try to figure out how to help her along the way. She would love to have the website featured. Thanks!
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Valerie you have a great idea for beautiful objects and materials, your photographer has a fantastic eye for showing them superbly and Klaus you have a great gift of web-layout, technique and perseverance. A winner I'm sure.

I hope you can contact Jan at Tabitha and let her know that your site is featuring their peoples Khmer products too.
Photo of rofasia

rofasia

  • 35 Posts
  • 0 Reply Likes
Hi Gop, thanks for the compliments. Yes Jan knows we are featuring her products. We order direct from her and Valerie goes and visits Cambodia at least every 18 months to support the Foundation. Thanks again!
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Photo of mik

mik

  • 172 Posts
  • 3 Reply Likes
I only ever managed to get my prev and next buttons spaced using a CSS crack... The fact that they are sprites and could add so much more has been a mystery to me... anyway, good luck!
Photo of Brandon

Brandon

  • 243 Posts
  • 33 Reply Likes
After taking a look, I see that bxslider has become even more complicated than before. I remember when I used it, a CSS file was included. I have no idea what I'm doing with this updated version! Sorry I can't be of more help. I'll look for some other alternatives - after all, there are loads of equally effective JQuery sliders out there!
Photo of mik

mik

  • 172 Posts
  • 3 Reply Likes
now that you say that... it kinda makes sense for there to be a CSS code you the user to implement... I'm gna go back to their website and have a good old search... just strange for it not to be in your face - hello I'm here kind of thing... hmmm