Solved

JQuery Vertical Sliding Galery

Posted on 2009-07-14
15
667 Views
Last Modified: 2013-11-19
I am trying to do two things with JQuery:

My jQuery slider on http://www.marisasimoncakes.com/index.php?/sweet_rewards/
dosen't seem to work right. I do use Sifr, but it moves the Flash. Is that the an incompatibility.

From the former code example I want to modify it to create a vertical slider, which is normally easy, but I can only have three thumbnails on the screen each time.
http://www.marisasimoncakes.com/index.php?/galleries/wedding_cakes/

Any help with either of these issues would be greatly appreciated. Thanks.
0
Comment
Question by:jsuissa
  • 8
  • 5
15 Comments
 
LVL 2

Expert Comment

by:toymachiner62
ID: 24853557
Is the only that doesn't work correctly with your first problem the size of the area?
0
 
LVL 2

Expert Comment

by:toymachiner62
ID: 24853595
what happens if you try

div.slider li { width:500px; }

0
 

Author Comment

by:jsuissa
ID: 24855430
I tried that with no luck, but for now I have put a black border around the edges to help mkae the issue clearer.
0
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 

Author Comment

by:jsuissa
ID: 24859375
I was able to fix the horizontal slider example on the Sweet Rewards page and just decided not to even attempt to use sIFR there.

I just am having trouble adapting it to the vertical Portfolio now.
0
 
LVL 2

Expert Comment

by:toymachiner62
ID: 24862695
>>> From the former code example I want to modify it to create a vertical slider, which is normally easy, but I can only have three thumbnails on the screen each time.
http://www.marisasimoncakes.com/index.php?/galleries/wedding_cakes/


What is the question for this part?
0
 

Author Comment

by:jsuissa
ID: 24865789
The question basically is now that slider works on Sweet Rewards page, I wanted to adapt it to work on the Gallery pages, but only show three images at a time and have it be vertical instead of horizontal. However, I have been having trouble making it work no matter what I tried. So I stripped it out for now. I hope that helps clarify things.
0
 
LVL 2

Accepted Solution

by:
toymachiner62 earned 500 total points
ID: 24870894
well to make it vertical you just use

$(document).ready(function() {
    $("#slider").easySlider( {
        orientation: 'vertical'
    });
});
0
 
LVL 2

Expert Comment

by:toymachiner62
ID: 24870900
Disregard that. I thought you were still using the easySlider plugin.
0
 

Author Comment

by:jsuissa
ID: 24883720
I am using the easy slider plugin on Sweet Rewardd and will on the Galleries so I'll try your suggestion.
0
 

Author Comment

by:jsuissa
ID: 24883792
Just tried the suggested code on the GALLERY -> OCCASION CAKES page, which was similiar to what I had my onw and unfortunattely no luck. Any other suggestions would be appreciated.

Link: http://www.marisasimoncakes.com/index.php?/galleries/occasion_cakes/#

Thank in advance.
0
 

Author Comment

by:jsuissa
ID: 24884511
Hi,

This is the script I am using on the Sweet REward pags and it dosen't work yet other sliders worked for in the paste:

<script type="text/javascript">
function slideUp () {
$(document).ready(function() {
    $(".cakeThumbnail").easySlider({
        orientation: 'vertical'
    });
});
};
</script>

Link: http://www.marisasimoncakes.com/index.php?/galleries/occasion_cakes/#

Thank in advance.
0
 

Author Comment

by:jsuissa
ID: 24886337
We have changed the code a bit, but it's still not working thought this seems more of an appropriate solution:

$(document).ready(function(){      
      $(".cakeThumbnail").easySlider(                  
            prevText: 'Previous',
            nextText: 'Next',            
            firstShow: true,
            lastShow: true,
            vertical: true,
            continuous: true       
      );
});
0
 

Author Closing Comment

by:jsuissa
ID: 31603231
This wasn't the exact solution, it was the only answer that came close to helping us solve our problem.
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn how to dynamically set the form action using jQuery.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

785 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question