Search jQuery

jQuery Forum

Jquery Cycle resizing elements

in Using jQuery Plugins • 11 years ago

Hello guys,

I'm trying to write a script that auto resize my jquery Cycle slideshow when I resize my browser. I tried some of the solutions already seen like Window Resize or the cycle options (containerResize, slideRezize, fit). But I don't make it work at all... so I would not mind to receive a bit of help.

So here is the JS code for the slideshow:

$(document).ready(function() {

    $this.cycle({
        timeout:            0,                              
        fx:                 'fade',                         
        pause:              1,                              
        speedIn:            1000,
        speedOut:           1000,
        sync:               false,
        containerResize: false,
        slideResize: false,
        fit: 1,
        ...

});

Hope someone can help on that.

Many thanks!!

Mateo

Replies(11)

charlietfl

Re: Jquery Cycle resizing elements

11 years ago

One issue in your code is "$this" is undefined

Your question comes up a lot so I decided to play with a resize plugin for cycle. I've only tested it a bit and need feedback on the types of layouts and css people are using in order to help better refine this. You are welcome to try it out

Demo and code

http://jsfiddle.net/UAeE9/

mateo82

Re: Jquery Cycle resizing elements

11 years ago

Hi charlietfl,

Many thanks for your answer and your demo! Concerning my value $this, actually a part of my JS code is missing, I couldn't copy all on the message, don't know why... Anyway my slideshow is working fine.

Your code and demo are great, it's what I was looking for. But how could we transform the code to make the image keeping the proportions when we modify the browser size?

Thank you!

charlietfl

Re: Jquery Cycle resizing elements

11 years ago

Can you post a link so I can see how css and layout is set up in your page. The aspect( proportions) part is what I need to figure out a bit more and may be dependent on how page is set up

mateo82

Re: Jquery Cycle resizing elements

11 years ago

Unfortunately I've got nothing online for the moment. But here is the HTML code of the slideshow in the body:

<div class="keyboardnav content-slider">
<ul class="slideshow">
    <li data-cycle-image="gallery/1.jpg" class="first"></li>
    <li data-cycle-image="gallery/2.jpg" ></li>
    <li data-cycle-image="gallery/3.jpg"></li>
    ...
</ul>
</div>

mateo82

Re: Jquery Cycle resizing elements

11 years ago

The CSS:

.content-slider { 
     position: absolute; 
     width: 950px; 
     height: 650px; 
     top: 50%; 
     left: 50%; 
     margin: -325px 0 0 -475px; 
     padding: 0; 
     background: red; 
}

mateo82

Re: Jquery Cycle resizing elements

11 years ago

...CSS...

ul.slideshow { 
     width: 950px; 
     height: 650px; 
     margin: 0; 
     padding: 0; 
     list-style: none; 
     display: block; 
     cursor: pointer; 
}

mateo82

Re: Jquery Cycle resizing elements

11 years ago

End of CSS...

ul.slideshow li { 
    position: relative; 
    width: 950px !important; 
    height: 650px; 
    text-indent: -9999px; 
    background-color: #000; 
    background-repeat: no-repeat; 
    background-position: center center; 
}

Hope that can help you. The slideshow is centered in the page, moving in a fluid layout with % for top and left.

charlietfl

Re: Jquery Cycle resizing elements

11 years ago

I can't tell very much from this regarding which width or height has to be the controlling factor.

Window width/height? Image resolutions?

Are you wanting to fill window but keep proportions of slides at ratio= 950/650?

mateo82

Re: Jquery Cycle resizing elements

11 years ago

Sorry, I understand your doubts.

ul.slideshow that is my JQuery Cycle has for children <li> which shows up each images one by one. The slideshow is centered in the body. The body has the following size: width 100% and height 100%. So there is nothing else than the slideshow in the page. The images resolution has 950px for width and 150px for height. They actually fill totally the slideshow.

So that's it. I would like that when we reduce the window browser, the slideshow keeps his centered position in the body and also reduces automatically his size with the images keeping the proportions of the reduced slidehow.

Here is an example that I found the other day www.jackytsai.com. It's exactly what I'm looking for. In that case the slideshow is really bigger than mine and it's actually better in this way.

charlietfl

Re: Jquery Cycle resizing elements

11 years ago

Here's a version that is more advanced with proportions built in as well as allowing to set a maximum size allowed ( for large screens).

Code will set size on page load as well based on environment

Full size view http://jsfiddle.net/zTR9k/1/show/

Code view http://jsfiddle.net/zTR9k/1/

All feedback welcome on how to improve it

happy2b07..

Re: Re: Jquery Cycle resizing elements

11 years ago

thnks for this. One issue when using in FIrefox, the red box (.content-slider I believe)
gets super-oversized when the brower window is made tall and skinny..then the nav picture boxes are way down the page. I have 2 questions:
#1 I dont need the nav picture boxes --how to get rid of them
#2 Which part of the html code (I copied it below) can I change to make that red box behave and stay tight to the slideshow?    ---thank you very much!

<style type='text/css'>
    html, body{ height:100%; margin:0}
.content-slider {
     width:90%;
     height:90%;
     margin:auto;
     background: fff;
}

ul.slideshow {
    width:100%;
     height:100%;
     margin:auto;

     padding: 0;
     list-style: none;
}

ul.slideshow li {
    position: relative;
     width:100%;
     height:100%;
}

.slideshow img{
         width:100%;
     height:100%;
     display:block;

}

#nav{
    text-align:center}

#nav a{ padding:3px; background:#EEE; margin-right:6px; display:inline-block;}
#nav a.activeSlide{ background:#990000;}

</style>

mateo82

Re: Jquery Cycle resizing elements

11 years ago

The slideshow is awesome!! Works perfectly, thanks a lot!

My slideshow contains more than 30 images. Consequently the connection is quite slow to load the website. Do you think it's possible to merge Jquery Cycle with a kind of lazy load (www.appelsiini.net/projects/lazyload) plugin ? That will permit to load the images one by one...

Another point, for example I'm always used to put a slide in the slideshow which is a div tag containing other HTML elements. How could we do that knowing that the URL of the images are in the JS code?

Still thanks for all!

Top Reply

Response title

Attachments

jQuery Forum

Jquery Cycle resizing elements

Replies(11)

Re: Jquery Cycle resizing elements

Re: Jquery Cycle resizing elements

Re: Jquery Cycle resizing elements

Re: Jquery Cycle resizing elements

Re: Jquery Cycle resizing elements

Re: Jquery Cycle resizing elements

Re: Jquery Cycle resizing elements

Re: Jquery Cycle resizing elements

Re: Jquery Cycle resizing elements

Re: Jquery Cycle resizing elements

Re: Re: Jquery Cycle resizing elements

Re: Jquery Cycle resizing elements

Statistics

Tags

Actions