Re: [Design with CSS 3612] Using CSS to set slideshow properties

beautiful site and font choice :) trully inspiring! but i can't get what goes wrong here Winkdale

2011/11/10 J2isndhu <Winkadale@aol.com>

Hi guys, I'm using the Jquery Cycle slideshow on my website. (http://
dl.dropbox.com/u/8847353/Jai_Sandhu_Design_Portfolio/index.html)

I've managed to get the slideshow to resize to work with my fluid
layout using the !important tag. This forces the Cycle plug-in to take
the % height and % width in my CSS... The transition is buggy though
and I can't understand why? I think it has something to do with
assigning a overflow: hidden to my slideshow but I can't get it to
work. Trying hard but struggling! Any suggestions would be greatly
appreciated!

<!-------The HTML------->

<div id="leftnav">
               <div class="slideshow">
                       <img src="work/japan_11.03/hope_for_japan_1.jpg" class="a"
alt="Japan 11/03: Title page" />
                       <img src="work/japan_11.03/hope_for_japan_2.jpg" class="a"
alt="Japan 11/03: Land of the rising sun" />
                       <img src="work/japan_11.03/hope_for_japan_3.jpg" class="a"
alt="Japan 11/03: Fishing for inspiration" />
                       <img src="work/japan_11.03/hope_for_japan_4.jpg" class="a"
alt="Japan 11/03: A little place called home" />
                       <img src="work/japan_11.03/hope_for_japan_5.jpg" class="a"
alt="Japan 11/03: Shinkasen" />
                       <img src="work/japan_11.03/hope_for_japan_6.jpg" class="a"
alt="Japan 11/03: Getting back into the swing of things" />
                       <img src="work/japan_11.03/hope_for_japan_7.jpg" class="a"
alt="Japan 11/03: Remembered and not forgotten" />
       </div>
</div>

<!-------The Javascript------->

$(document).ready(function() {
$('.slideshow')
.after('<div id="nav">')
.cycle({
               fx: 'fade',
               sync: true,
               speedIn:  500,
               speedOut:  500,
               timeout: 10000,
               pager:  '#nav',
               next:   '.slideshow',
               slideResize: false,
       });
});

<!-------The CSS------->

img.a {
    min-width: 475.2px;
    max-width: 1342px;
    height: 92.58%;
}

.slideshow {
   width: 92.58% !important;
   margin-left:7%;
   overflow: hidden;
}
.slideshow img {
   height: auto !important;
   width: 92.58% !important;
   position: relative !important;
   padding: 0px;
   background-color: #fcfcfc;
}

.pics {
   padding: 0;
   margin:  0;
}

.pics img {
   padding: 0px;
   background-color: #fcfcfc;
   top:  0;
   left: 0;
}

--
--
You received this because you are subscribed to the "Design the Web with CSS" at Google groups.
To post: css-design@googlegroups.com
To unsubscribe: css-design-unsubscribe@googlegroups.com

--
BAZINGA Designs

Carlisle / Warsaw / Pulawy

http://www.bazingadesigns.com

Igor Wnuk
Ul. PCK 5/20
24-100 Puławy

tel. +48 667 200 706

tel. +48 722 188 134

REGON: 060622686
NIP: 716-255-43-47

--
--
You received this because you are subscribed to the "Design the Web with CSS" at Google groups.
To post: css-design@googlegroups.com
To unsubscribe: css-design-unsubscribe@googlegroups.com