0

I'm trying to set up a slider that uses just one control-menu (e.g. Item 1 | Item 2 | Item 3) but affects both the background image and a div container with text in it.

Take a look at this example from SAP: http://www.sap.com/germany/index.epx There you can click on this yellow squares and both, the text in the box and the background changes (even in the right aspect ratio).

I tried several slideshow plugins, such as jCarousel, Nivo Slider, bxSlider, ... But because of my weak javascript skills, I don't really have a clue of how to achieve my goal...

Anybody can help me?

Thanks, Sebastian

EDIT: Thanks for your replies! I tried your solutions and commented it (see below). In addition to that, I provide a link to the webpage I'm trying to get this effect working: http://prism-informatics.com/new/#

For the background-sliding effect I use a library/script/module called "bgStretcher". It provides preloading of bg-images, nice transition effects, and "live-scaling"...

And there's a jCarousel in the center of the page (the white box with text in it like "IT-Strategy"). The best thing to happen would be, if you click on the controls below the box (the numbers "1" or "2") then this tells the bgStretcher-script to slide to the appropriate bg-picture... because of my bad js skills, I don't know if there's a way to do that...

Sierra101
  • 251
  • 3
  • 12
  • Does it need to change automatically on a timer, or only by user control? – Mark Eirich Jun 29 '12 at 21:44
  • I am not 100% sure how to do this but what I would do is set a timer and then either when that timer runs out or when the user clicks an element with a particular class, reset the timer and change the text / background. I will come back and work on this over the w/e if you have no luck. I have to say the example you gave is simply horrible. I noticed it was loading really slowly in Chrome so monitored the resources in Firebug for a few minutes - seems that each time the background changes it *reloads* the next image, rather than displaying the previous version of the same image. – ClarkeyBoy Jun 29 '12 at 22:12
  • @ClarkeyBoy agreed on the resource swapping, that's why my answer went with encourages a sprite. I can type in a URL swap if he asks for it – DefyGravity Jun 29 '12 at 22:38
  • I know, this isn't the best example site, but the only one in my mind... Best scenario would be timer and user control. Exactly as shown there. – Sierra101 Jun 29 '12 at 23:46
  • I see that bgStretcher allows you to specify a callback function. If it works like I expect, you can use that to change out the text. In that case you may not need jCarousel at all. – Mark Eirich Jun 30 '12 at 00:23
  • Please see my new answer, which makes use of bgStretcher (I added a new answer instead of editing my first one, because the approach is so different.) – Mark Eirich Jun 30 '12 at 01:07
  • @DefyGravity I've seen a slideshow designed by one of our clients - can't say who for confidentiality reasons but the way they did it was have 12 img tags in one div with only the first one visible initially and then have a pause / forward / backward button to control it. Can't remember exactly how it works but I think it has something to do with setting the margin-left of the parent div to move the next / prev image into view. The same principal could be used here but with each image in its own div so that you can position text in the bottom left. – ClarkeyBoy Jun 30 '12 at 10:00

3 Answers3

0

Try this: (also here: http://jsfiddle.net/HzWRT/)

<!DOCTYPE html><html><head>

<style>
.slider {
    margin: 100px;
    padding: 10px;
    border: 1px solid black;
}
.slider > div {
    display: none;
}
.slider > .control, .slider > .active {
    display: block;
}
.slider > .control .active {
    font-weight: bold;
}
</style>

</head><body>

<p>Other content here.</p>

<div class="slider">
    <div id="one">
        <h2>One</h2>
        <p>Something you want to say.</p>
    </div>
    <div id="two">
        <h2>Two</h2>
        <p>Something you want to write.</p>
    </div>
    <div class="control">
        <a href="#one" data-background="lightblue" class="active">One</a>
        <a href="#two" data-background="lightgreen">Two</a>
    </div>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
jQuery(function($) {
    $('.slider > .control').delegate('a', 'click', function() {
        var $this = $(this),
            slider = $this.closest('.slider');
        $('body').css('background', $this.data('background'));
        slider.find('.active').removeClass('active');
        slider.find($this.attr('href')).addClass('active');
        $this.addClass('active');
        return false;
    }).find('.active').trigger('click');
});
</script>
</body></html>

It does not automatically change on timer, but you didn't specify whether you needed that.

To use image backgrounds, just replace "lightblue" and "lightgreen" with any CSS background property, like "url(http://example.com/bg.png)"

Mark Eirich
  • 10,016
  • 2
  • 25
  • 27
  • I appreciate your fast reply!Your solution worked!Unfortunately, it lacks the transition effects a jCarousel solution comes with (also adjusting/preloading of images).If you could tell me, how to implement that, maybe by using the libraries I found already, it could really help me. Maybe you have a look at the webpage, where I try to get this effect working (see edited post above with). – Sierra101 Jun 30 '12 at 00:11
  • All I see in your question is the SAP link. Is that the site you are working on? What transition effects do you want? My solution preloads images I believe. I'm not sure what you mean by "adjusting" of images. Please explain. – Mark Eirich Jun 30 '12 at 00:15
0

that's a big slide show.

how about splitting them up? text scroller, and a big sprite in the back that you use css to alter the images in the background.

first, you need to scroll some text. there are all kinds of image scrollers that can scroll text for you too. if you go with jcarousel, then just follow the text scroller

second, decide if you want to use a sprite and a div / body element for your images. you will need to set the height and width of whichever you choose, and make sure "display:block" or "display:inline-block" is set.

finally, latch onto the 'text scrolling' to know when to scroll the picture. (you could also use this idea to $("#some-other-carousel .jcarousel-prev").click() and advance a seperate carousel )

example:

<body style="background:url(/some/sprite.png) no-repeat 0 0;">
<ul id="text-id">
  <li>whatever</li>
  <li>a jcarousel</li>
  <li>text carousel</li>
  <li>needs</li>
</ul>
</body>

js

  $(function(){
//start the carousel with whatever it needs to scroll text
     $("#text-id").jcarousel();
// y - size of your sprite
     var totalSpriteYsize = 400;
// your example used the body element for a picture background, so that's what this does
     var $body = $("body");
// 'listen' for your text carousel clicks, and alter the background picture
      $body.on({"click":function(event){
       var curPosition = parseInt($body.css("background-position-y"),10);
       var adjustY =100;
// all sprite Y positions go negative from 0, and we don't want to go off the end of the sprite
       var newPosition = -((curPosition - adjustY) % totalPicYsize);
       if($(this).is(".jcarousel-prev"){
         newPosition = -((curPosition + adjustY) % totalPicYsize);
       }
       $body.css("background-position-y", newPosition+"px");
//this .on selector decides which 'clicks' to listen to.
      }},".jcarousel-prev,.jcarousel-next",null);

    });
DefyGravity
  • 5,681
  • 5
  • 32
  • 47
  • First of all, thanks for your quick reply! I tried to get along with this solution. Your initial idea to use two jcarousels was also mine. But it seems to me that jCarousel initially wasn't designed for background-image sliding... And your js code - I fear I've got not enough js syntax skills to recognize if "$(function(){" declares a real function in js, or this is just a placeholder for a function (guess 2nd, put it in the jcarousel ".ready" function).I could manage to get a text carousel running, but not to swap the bg-image by using the carousel nav options and your solution. – Sierra101 Jun 30 '12 at 00:00
  • `$(function(){})` is the same as `jQuery(document).ready(function(){})` – Mark Eirich Jun 30 '12 at 00:17
0

This new answer makes use of bgStretcher: (fiddle: http://jsfiddle.net/rNLEQ/)

<!DOCTYPE html><html><head>

<link rel="stylesheet" type="text/css" href="http://www.ajaxblender.com/script-sources/bgstretcher-2/bgstretcher.css" />

<style>
.slider {
    background-color: white;
    width: 300px;
    margin: 100px;
    padding: 10px;
    border: 1px solid black;
}
.slider > div {
    display: none;
}
.slider > .control, .slider > .active {
    display: block;
}
.slider > .control li {
    display: inline;
    padding: 10px;
}
.slider > .control .showPage {
    font-weight: bold;
}​
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://www.ajaxblender.com/script-sources/bgstretcher-2/bgstretcher.js"></script>
<script>
jQuery(function($) {
    $('body').bgStretcher({
        images: [
            'http://prism-informatics.com/new/sites/all/themes/prism_new/images/bg1.jpg',
            'http://prism-informatics.com/new/sites/all/themes/prism_new/images/bg2.jpg',
            'http://prism-informatics.com/new/sites/all/themes/prism_new/images/bg3.jpg',
            'http://prism-informatics.com/new/sites/all/themes/prism_new/images/bg4.jpg',
        ],
        imageWidth: 1024, 
        imageHeight: 768, 
        nextSlideDelay: 8000,
        slideDirection: 'N',
        slideShowSpeed: 1000,
        transitionEffect: 'fade',
        sequenceMode: 'normal',
        buttonPrev: '#prev',
        buttonNext: '#next',
        pagination: '.control',
        anchoring: 'left center',
        anchoringImg: 'left center',
        preloadImg: true,
        callbackfunction: function() {
            var i = $('#bgstretcher .bgs-current').index('#bgstretcher li') + 1;
            $('.slider > div').removeClass('active');
            $('#slide'+i).addClass('active');
        }
    });
});
</script>
</head><body>

<p>Other content here.</p>

<div class="slider">
    <div id="slide1" class="active">
        <h2>One</h2>
        <p>Something you want to say 1.</p>
    </div>
    <div id="slide2">
        <h2>Two</h2>
        <p>Something you want to say 2.</p>
    </div>
    <div id="slide3">
        <h2>Three</h2>
        <p>Something you want to say 3.</p>
    </div>
    <div id="slide4">
        <h2>Four</h2>
        <p>Something you want to say 4.</p>
    </div>
    <div class="control"></div>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

</body></html>
Mark Eirich
  • 10,016
  • 2
  • 25
  • 27