Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

JQuery Vertical Sliding Galery

Posted on 2009-07-14
15
670 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
MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

 

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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

856 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