Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Mar 2008
    Posts
    77
    Thanks
    15
    Thanked 1 Time in 1 Post

    Caroufredsel - fade previous/next frames. Very close to functioning

    I've used this forum in the past to help me figure out some js issues and I've found you guys to all be pretty knowledgeable. Hoping someone can help me with this one-
    I have a caroufredsel slider and i'm trying to have it so that the previous and next frames are faded out to .35 opacity and only the center active frame is fully highlighted in color. Can you check out my code and let me know if you have any ideas?

    Code:
    jQuery(function() {
    		
    	var defaultCss = {
            opacity: .35,
    		width: 985,
    		height: 471,
    		margin: 0,
        };
        var selectedCss = {
            opacity: 1,
    		width: 985,
    		height: 471,
    		margin: 0,
    
        };  
    	
    					
    	var $car = $('#foo5');
    	
    	$car.find('img').css( defaultCss );
    	
    	
    	$car.carouFredSel({	
    							        
    				width: '100%',
            items: {
                            visible: 3,
                            start: -1
                    },
                            scroll: { 
    						items: 1, 
    						duration: 1000, 
    						timeoutDuration: 7000,
    						easing: 'easeInOutExpo',
    						onBefore: function( data ) {
    							data.items.old.find('img').animate( defaultCss);
    							data.items.visible.find('img').animate( selectedCss );
    						}
    					},
    				auto : {pauseOnHover: true},
     				prev : "#prev5",
                    next: '#next5'
    		
            });
    });

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    My base code is different than your as is my HTML but, here's my version based from: http://caroufredsel.dev7studios.com/...-functions.php

    Code:
    	function highlight( items ) {
    		items.filter(":eq(1)").css({
    			opacity : 1
    		});
    		return items;
    	}
    	function unhighlight( items ) {
    		items.css({
    			opacity : .3
    		});
    		return items;
    	}
    	$('.suitesslider').carouFredSel({
    		responsive: true,
    		circular: true,
    		infinite: false,
    		auto: false,
    		prev: {
    			button : '.bx-prev', 
    			onBefore: function( data ) {
    				unhighlight( data.items.old );
    			},
    			onAfter	: function( data ) {
    				highlight( data.items.visible );
    			}
    		},
    		next: {
    			button : '.bx-next', 
    			onBefore: function( data ) {
    				unhighlight( data.items.old );
    			},
    			onAfter	: function( data ) {
    				highlight( data.items.visible );
    			}
    		},
    		scroll: 1,
    		items: {
    			visible: {
    				min: 1,
    				max: 3
    			},
    			width: 80,
    			height: 'auto'
    		}
    	});
    	highlight( unhighlight( $(".suitesslider > *") ) );
    Obviously my wrapper is .suitesslider and my buttons are named different. I show 3. On scroll the outer 2 are .3 opacity. the center is opacity 1.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • Users who have thanked harbingerOTV for this post:

    darnen101 (06-18-2013)

  • #3
    New Coder
    Join Date
    Mar 2008
    Posts
    77
    Thanks
    15
    Thanked 1 Time in 1 Post
    sorry for the late response- I've been fidgeting. Your solution worked perfectly though thank you

    Noticing another issue now that im seeing the faded out prev/next slides. I've set up a simple info popup on hover of one of these slides. Prob is that its doing this even when the slide is faded out. I'm trying to set up a listener var to tell when the slide is highlighted and available vs faded out and unavailable. just named the var 'available'

    code for slider:
    Code:
    	function highlight( items ) {
    		items.filter(":eq(1)").css({
    			opacity : 1,
    		});
    		var available = 1;
    		return items;
    	}
    	function unhighlight( items ) {
    		items.css({
    			opacity : .3,
    		});
    		var available = 0;
    		return items;
    	}
    	$('#foo5').carouFredSel({
    		responsive: false,
    		circular: true,
    		infinite: true,
    		auto: false,
    		width: '100%',
    
    		prev: {
    			button : '#prev5', 
    			onBefore: function( data ) {
    				unhighlight( data.items.old );
    				var available = 0;
    
    			},
    			onAfter	: function( data ) {
    				highlight( data.items.visible );
    				var available = 1;
    
    			}
    		},
    		next: {
    			button : '#next5', 
    			onBefore: function( data ) {
    				unhighlight( data.items.old );
    				var available = 0;
    
    			},
    			onAfter	: function( data ) {
    				highlight( data.items.visible );
    				var available = 1;
    			}
    		},
    
            items: {
                            visible: 3,
                            start: 1,
    						width: 985,
                    },
                            scroll: { 
    						items: 1, 
    						duration: 1000, 
    						timeoutDuration: 7000,
    						easing: 'easeInOutExpo',
    						},
    				auto : { pauseOnHover: true}
    	});
    	highlight( unhighlight( $("#foo5 > *") ) );
    });
    and example of code for the jquery initiating the info popups:
    Code:
    if (typeof available ==1){
    
    jQuery(document).ready(function($) {
    $('.hp_up1')
        .on("mouseenter", function() {
    		$("#hp_slider1").stop().animate({"top": "120px"}, "fast");
    
        })
        .on("mouseleave", function() {
    		$("#hp_slider1").stop().animate({"top": "441px"}, "fast");
    
        });    });
    }
    This is a lil deeper than I usually dive into JS so let me know if you can tell what im doing wrong

  • #4
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    How about just adding the "on" to the function you already have? eg:

    Code:
    	function highlight( items ) {
    		items.filter(":eq(1)").css({
    			opacity : 1,
    		}).on('mouseenter', function(){
    			$(this).css({'background-color' : 'pink'});
    			$('body').css({'border' : '2px solid lime'});
    			$("#hp_slider1").stop().animate({"top": "120px"}, "fast");
    		});
    
    		return items;
    	}
    	function unhighlight( items ) {
    		items.css({
    			opacity : .3
    		}).on('mouseleave', function(){
    			$(this).css({'background-color' : 'transparent'});
    			$('body').css({'border' : '2px solid purple'});
    			$("#hp_slider1").stop().animate({"top": "441px"}, "fast");
    		});
    		return items;
    	}
    I tossed in some other stuff to show you you can just plop in a slew of things for it to do mouseenter/mouseleave
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • Users who have thanked harbingerOTV for this post:

    darnen101 (06-18-2013)

  • #5
    New Coder
    Join Date
    Mar 2008
    Posts
    77
    Thanks
    15
    Thanked 1 Time in 1 Post
    much better approach than mine - thanks for the clarification!
    Very close now- the mouseovers appear to be working but not exactly as they should. When i hover over the main image, instead of the popup happening over the main image, its coming up over the PREVIOUS unhighlighted image. Is this a problem because all 4 frames popup info is contained in a div of the same name?
    I'm following your js pretty closely.. maybe i should show my html:
    Code:
    <div id="foo5">
    				<li style="width: 985px;"><a href="somelink.html"><div id="hp_slider">some copy</div><img src="images/framebg1.jpg" ></a></li>
                    		<li style="width: 985px;"><a href="somelink.html"><div id="hp_slider">some copy</div><img src="images/framebg2.jpg" ></a></li>
    				<li style="width: 985px;"><a href="somelink.html"><div id="hp_slider">some copy</div><img src="images/framebg3.jpg" ></a></li>
    				<li style="width: 985px;"><a href="somelink.html"><div id="hp_slider">some copy</div><img src="images/framebg4.jpg" ></a></li>
    			</div>
    Just to save us another back and forth because i dont want to waste your time (and really appreciate the help!)
    Here is my js just in case
    Code:
    function highlight( items ) {
    		items.filter(":eq(1)").css({
    		opacity : 1,
    		})
    		.on('mouseenter', function(){
    			$("#hp_slider").stop().animate({"top": "120px"}, "fast");
    		});
    		return items;
    	}
    	function unhighlight( items ) {
    		items.css({
    		opacity : .2,
    		})
    		.on('mouseleave', function(){
    			$("#hp_slider").stop().animate({"top": "441px"}, "fast");
    		});
    		return items;
    	}
    	$('#foo5').carouFredSel({
    		responsive: false,
    		circular: true,
    		infinite: true,
    		auto: false,
    		width: '100%',
    
    		prev: {
    			button : '#prev5', 
    			onBefore: function( data ) {
    				unhighlight( data.items.old );
    
    			},
    			onAfter	: function( data ) {
    				highlight( data.items.visible );
    
    			}
    		},
    		next: {
    			button : '#next5', 
    			onBefore: function( data ) {
    				unhighlight( data.items.old );
    
    			},
    			onAfter	: function( data ) {
    				highlight( data.items.visible );
    			}
    		},
    
            items: {
                            visible: 3,
                            start: -1,
    						width: 985,
                    },
                            scroll: { 
    						items: 1, 
    						duration: 1000, 
    						timeoutDuration: 7000,
    						easing: 'easeInOutExpo',
    						},
    				auto : { pauseOnHover: true}
    	});
    	highlight( unhighlight( $("#foo5 > *") ) );

  • #6
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Ah, now seeing your HTML, yeah, only 1 ID per page. Try changing them to classes, eg:
    Code:
    <li style="width: 985px;"><a href="somelink.html"><div class="hp_slider">some copy</div><img src="images/framebg1.jpg" ></a></li>
    and
    Code:
    $(".hp_slider").stop().animate({"top": "120px"}, "fast");
    and so on.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • Users who have thanked harbingerOTV for this post:

    darnen101 (06-18-2013)

  • #7
    New Coder
    Join Date
    Mar 2008
    Posts
    77
    Thanks
    15
    Thanked 1 Time in 1 Post
    I changed them to classes and now ALL the popup info's come up when you hover over the 1 center highlighted image.

    Let me know what you think.. i prob have just interpreted you incorrectly..
    Right now- 4 images, all have .hp_slider as their popup div, and the js you mention above. If i were to make them all hp_slider1, hp_slider2, etc... i still dunno how to let the js know which to popup at the correct time

  • #8
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    whoops,
    You should probably make it like:

    $(".hp_slider", this).stop().animate({"top": "120px"}, "fast");
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • Users who have thanked harbingerOTV for this post:

    darnen101 (06-18-2013)

  • #9
    New Coder
    Join Date
    Mar 2008
    Posts
    77
    Thanks
    15
    Thanked 1 Time in 1 Post
    still not quite functional. I've PM'd you with details - let me know if we can wrap this up and i can compensate you for your time

  • #10
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Weird, not sure why it's "hanging on" to the active state like that.

    But, I tried this and it looks to be working correctly:

    Code:
    	function highlight( items ) {
    		items.filter(":eq(1)").css({
    		opacity : 1,
    		})
    		.addClass('activeSlide')
    		.on('mouseenter', function(){
    			if($(this).hasClass('activeSlide')){
    				$(".hp_slider", this).stop().animate({"top": "120px"}, "fast");
    			}
    		});
    		return items;
    	}
    	function unhighlight( items ) {
    		items.css({
    		opacity : .2,
    		})
    		.removeClass('activeSlide')
    		.on('mouseleave', function(){		
    			$(".hp_slider", this).stop().animate({"top": "441px"}, "fast");
    		});
    		return items;
    	};
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • Users who have thanked harbingerOTV for this post:

    darnen101 (06-20-2013)

  • #11
    New Coder
    Join Date
    Mar 2008
    Posts
    77
    Thanks
    15
    Thanked 1 Time in 1 Post
    amazing! perfect! love it
    Thank you so much for sticking with me. All this trouble to get this working hopefully I find some more sites to implement this kinda thing with.

    Thanks again!!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •