SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Thread: Vertical Slider

  1. #1
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Vertical Slider

    Hi there,

    I'm currently looking into using a JQuery plugin to create a vertical slider for background images. My idea is that I have JQuery controlling an automatic vertical slider which fills the screen but also gives the user the control to scroll through at leisure.

    I've managed to track down a relatively small plugin to do the job but I am having problems modifying it so that the controls appear exactly where I want them to (i.e so that the scrolling ability can happen using the up and down arrows). However, when I adjust the positioning using CSS it simply breaks the JQuery code (mainly because the HTML is generated by the JQuery, or that's what I assume?).

    Below is a link to the download page for the code and a further link to demonstrate what the horizontal version does. To change it to vertical it's a simple case of changing the "alignment:" from hori

    http://www.htmldrive.net/items/show/...Content-Slider

    http://www.htmldrive.net/items/demo/...Content-Slider

    I am fairly sure this should be something simple to do but as my JQuery knowledge is very limited I can't quite figure out what I need to do.

    Any help would be much appreciated!

    Cheers,

    Andrew.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Are you able to post a link to what you have already?

    It looks like that example if of the bxSlider, which also has its own website with a lot of info, including a vertical scroller example:

    http://bxslider.com/examples/vertical-slideshow

  3. #3
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Are you able to post a link to what you have already?

    It looks like that example if of the bxSlider, which also has its own website with a lot of info, including a vertical scroller example:

    http://bxslider.com/examples/vertical-slideshow
    Thanks for your quick reply!

    So far I haven't managed to get it much beyond the code that's demonstrated. All I have done is positioned the "next" link to the left of the scroller which appears to break the code as the "next" or down option as it is on my example flickers and does not work when clicked.

    http://www.psychobeing.co.uk/verticalslider/

    I also envisage one further issue which may cause some problems. I want the content div to fill the screen but have the controls appearing on top. Would there be an easy way to modify the JQuery so that I simply link my own HTML to it rather than it generating it all for me? That way I can have much more control over where things are positioned etc.

    Also you are correct it is the BXSlider. However, there is no demonstration HTML within the download files to give an example of how to lay it out, only the source files for the JQuery, CSS and some images.

    Thanks again.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    In your example, both arrows have a "prev" class. Shouldn't one of them be "next"?

    In terms of full page, it might be better to find a slider that is already set up that way. Perhaps Google "full page jQuery slider". One that comes to mind is Supersized3.

  5. #5
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    In your example, both arrows have a "prev" class. Shouldn't one of them be "next"?

    In terms of full page, it might be better to find a slider that is already set up that way. Perhaps Google "full page jQuery slider". One that comes to mind is Supersized3.
    Yeah that was me trying to get my head around it working, just a temporary change to see what it did and to gain control of the object without interferring with the original css.

    Thanks very much for your suggestion. I looked into Supersized before but again there wasn't a full-feature demo. However, after looking for "full page jquery sliders" on Google I came across a background image slider which does exactly what I want and best of all, has a demo which I've been able to tweak to get what I want! . Without your suggestion I don't think I would have even thought of it...spent quite a long time and it was there all the time

    For anyone else interested you can find the nifty slider which has a range of options to choose from here: http://www.ajaxblender.com/bgstretch...n-updated.html

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Glad you found one that suits. Thanks for the link. One more to add to the collection.

  7. #7
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Just want to add something to this discussion. Be careful when using background image sliders. A friend created one for her DJ site, and I done a stupid thing visited on my mobile. 1/100 of my monthly allowance was zapped from 1 page visit! I'm not on a high tarrif, but her images were for large screens and all were preloaded
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  8. #8
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Markdidj View Post
    Just want to add something to this discussion. Be careful when using background image sliders. A friend created one for her DJ site, and I done a stupid thing visited on my mobile. 1/100 of my monthly allowance was zapped from 1 page visit! I'm not on a high tarrif, but her images were for large screens and all were preloaded
    Ah thanks for the tip! It may mean me making a new site for mobiles then....or I have heard of some clever application which drastically optimises images without reducing their quality (online only I think it was and was something of an innovation). Going off-topic here but any ideas what it was called?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •