Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

JQuery Vertical Sliding Galery

Posted on 2009-07-14
15
Medium Priority
?
681 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
Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

 

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 1500 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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
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.
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 how to look for a specific file type in a local or remote server directory using PHP.

722 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