WordPress.org

Ready to get started?Download WordPress

Forums

Meteor Slides
[resolved] change overflow (10 posts)

  1. bmwboarder
    Member
    Posted 3 years ago #

    Hi,

    I am trying to create a flexible layout, and I've got it pretty close, but I need to change the "overflow: hidden" in the 'slides' class. I'm hoping to use a giant 1200px image, but have it only show the amount that the user's browser window can support.

    It looks like it is added by javascript?

    Many thanks for any help,
    Brandon

  2. bmwboarder
    Member
    Posted 3 years ago #

    Alright, I found that I could change the overflow in the slideshow.js file.

    Now I just need to figure out how to keep the photo centered, so that the hidden parts overflow on both sides of the div. I'd like to see the middle part of the photo, no matter what size the browser screen is. Will I have to change it from being positioned absolutely? Thanks.

    Brandon

  3. Josh Leuze
    Member
    Plugin Author

    Posted 3 years ago #

    Hi Brandon, a few of the jQuery settings are tricky to override, but you should be able to use a custom stylesheet. Could you post a link to the page you are working on so that I can see exactly what you are trying to do?

  4. bmwboarder
    Member
    Posted 3 years ago #

    Hi JLeuze,

    I don't have a link to give yet, sorry. I've got the slider working the way I want to in firefox, but I get a javascript error thrown in IE that says invalid argument, line 116, char 165 on jquery.js.

    Any ideas what that could be? I'm getting close, but this one is baffling me. I will send you a link to the site when I get all done, because it is looking quite good (just not in internet explorer yet...)

    Thanks for this plugin, it is quite flexible really.

  5. Josh Leuze
    Member
    Plugin Author

    Posted 3 years ago #

    Ah, I think I see the problem Brandon. The jQuery that you are referring to is before the jQuery Cycle settings and is being overridden.

    If you take this code from slideshow.js:

    $j(document).ready(function() {
    
    	$j('.meteor-slides,.slides,.meteor-nav a').css('height', $slideheight);
    
    	$j('.meteor-slides,.slide,.meteor-nav').css('width', $slidewidth);
    
    	$j('.slides').css('overflow', 'visible');
    
        $j('.slides').cycle({
    
    		height: $slideheight,
    		width: $slidewidth,
    		fit: '1',
    		fx: $slidetransition,
    		speed: $slidespeed,
    		timeout: $slidetimeout,
    		pause: '1',
    		prev: '#meteor-prev',
    		next: '#meteor-next',
    		pager: '#meteor-buttons',
    		pagerEvent: 'click',
    		cleartypeNoBg: 'true'
    
    	});
    
    });

    And rearrange it like this:

    $j(document).ready(function() {
    
        $j('.slides').cycle({
    
    		height: $slideheight,
    		width: $slidewidth,
    		fit: '1',
    		fx: $slidetransition,
    		speed: $slidespeed,
    		timeout: $slidetimeout,
    		pause: '1',
    		prev: '#meteor-prev',
    		next: '#meteor-next',
    		pager: '#meteor-buttons',
    		pagerEvent: 'click',
    		cleartypeNoBg: 'true'
    
    	});
    
    	$j('.meteor-slides,.slides,.meteor-nav a').css('height', $slideheight);
    
    	$j('.meteor-slides,.slide,.meteor-nav').css('width', $slidewidth);
    
    	$j('.slides').css('overflow', 'visible');
    
    });

    That should cause the overflow to be visible, but this depends on the transition that you have chosen, some need the overflow hidden to work and override this.

  6. bmwboarder
    Member
    Posted 3 years ago #

    Thanks Jleuze!

    I got the overflow working now, and I have everything pretty much working in firefox, but the transitions look terrible in IE (6, 7 and 8).

    To get the desired effect, I gave the slide a margin-left: 50%, and a left: -650px (1/2 the max width of the photo in the slide). Here is a test I made up to demonstrate what I'm trying to get: http://www.mybikespot.com/test_for_rana.php

    I got the effect working, but in IE the images show up in the .slide div first (over left: 50%) and then fill in the whole parent div.

    Maybe this is stretching for the plugin. Could there be a way to fix the transitions for internet explorer? Or could there be another way to center the bigger child div within the smaller parent div (at least when the browser width is smaller than the 1250px images I want to use)?

  7. bmwboarder
    Member
    Posted 3 years ago #

    I'm slowly getting where I want to be, but every time I fix something, I think something else breaks...

    I figured out that the jquery was changing the opacity of the div, and in internet explorer half of the image would show up once the .slide div was fully opaque. So I switched the 50% and negative margin to the img instead of the parent div. Everything is positioned correctly now, even in internet explorer.

    Somehow though, the transition across all browsers became a lot more flashy. It seems it is fading out the slide correctly, but instead of fading in the new one, it just loads without any fading in.

    I changed some of the css:

    #meteor-slideshow .slide {
    	display: none;
    	margin: 0 auto;
    	height: 421px;
    	padding: 0;
    	position: relative;
    }
    
    #meteor-slideshow #slide-1 {
    	display: block;
    }
    
    #meteor-slideshow .slide a {
    	border: 0;
    	margin: 0;
    	padding: 0;
    }
    
    #meteor-slideshow .slide img {
    	border: 0;
    	left: 50%;
    	margin: 0 0 0 -616px;
    	padding: 0;
    	width: 1232px;
    	position: absolute;
    }

    I also changed line 260 of jquery.cycle.all.js to position the slides with relative instead of absolute. Thanks for the help with this so far.

    Brandon

  8. Josh Leuze
    Member
    Plugin Author

    Posted 3 years ago #

    Ah, that graphic helps a lot Brandon. So you are trying to make a slideshow that is fluid and fits with width of the site? But you want the images "cropped", not resized when the slideshow shrinks in width right?

    That will be pretty tricky to pull off, but jQuery Cycle is pretty powerful. I would be someone has done this with the jQuery plugin, I would figure out that part first then get it working in WordPress. A search for "jquery cycle fluid width" brings some leads on that front.

    I'll do some tests of my own and see if I can get something to work. If you can get your demo online, I could give you some more detailed help for your IE issues.

  9. bmwboarder
    Member
    Posted 3 years ago #

    Thanks JLeuze,

    I've got the fluid layout working great now in all browsers. The only thing left is that the transitions don't seem to be as good as they were before. Not unbearable, but not like the jquery cycle example page at all. Thanks for looking at this with me :)

    Brandon

  10. Josh Leuze
    Member
    Plugin Author

    Posted 3 years ago #

    That's good to hear! You could try adjusting the transition speed, I have found that certain transitions look better at certain speeds.

    You could also try adding easing, this could make the transitions smoother, but I haven't dug into this plugin yet.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic