Solved

JQuery Vertical Sliding Galery

Posted on 2009-07-14
15
673 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
[X]
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
  • 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
Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free Account Now

 

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

Creating Instructional Tutorials  

For Any Use & On Any Platform

Contextual Guidance at the moment of need helps your employees/users adopt software o& achieve even the most complex tasks instantly. Boost knowledge retention, software adoption & employee engagement with easy solution.

Question has a verified solution.

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

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article discusses four methods for overlaying images in a container on a web page
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
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)
Suggested Courses

627 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