Solved

JQuery Vertical Sliding Galery

Posted on 2009-07-14
15
671 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
ModalPopup  question 22 37
HTML auto refresh to another site 4 28
Jquery 7 28
Put javascript to get dropdown value 3 21
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
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 …
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
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)

685 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