We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
MODX Community Forums Archive

Slider/Pagination help!

    • 5854
    • 39 Posts
    Counterfire Reply #1, 16 years, 1 month ago
    Hello All,

    Website in question: http://ar.fiery-legends.de/

    Problem: So, as you can see the slider works fine, fades in fine etc. However, if you mouseover or click one of the pagination links to go to a particular slide then the slider stops playing, any idea why?

    While we are at it does anyone know how I could code it so that whenever the slide is autoplaying the current slide automatically activates the mouseover for the button? i.e. When we go from slide 1 to slide 2, the "slide-2-pagination-button" turns pink until it moves onto slide 3 where "slide-3-pagination-button" would turn pink respectively and so forth

    Thanks !

      • 10076
      • 1,024 Posts
      Frank Reply #2, 16 years, 1 month ago
      Hi,

      dont know what script you are using but I notice one thing, the url changes to http://ar.fiery-legends.de/#. So you are on another URL and ending with hash (?) I mean this sign "#". And it is the same URL for the four links. Can t be right can it?

      Another thing, is this a rough setup? Because the graphics seem to have a bit blocked edges?

      Frank.
        • 5854
        • 39 Posts
        Counterfire Reply #3, 16 years, 1 month ago
        I removed the 4 href="#" (I just realised those were useless links) on the numbers but it still stops playing when I mouseover a pagination button sad

        Another thing, is this a rough setup? Because the graphics seem to have a bit blocked edges?

        If you are talking about the picture in Slide 1 then that is just the image. And yes this is a work in progress.

          • 10076
          • 1,024 Posts
          Frank Reply #4, 16 years, 1 month ago
          Okay, so but how are the links created? Through Wayfinder, I had a slider once (jquery) and someone adapted the script so that the links were created with the correct URL. Problem was more or less the same I guess, check here, maybe related.
            • 5854
            • 39 Posts
            Counterfire Reply #5, 16 years, 1 month ago
            Quote from: Frank at Sep 15, 2010, 10:59 AM

            Okay, so but how are the links created? Through Wayfinder, I had a slider once (jquery) and someone adapted the script so that the links were created with the correct URL. Problem was more or less the same I guess, check here, maybe related.

            Well, my question is not MODX related at all. I don’t have MODX installed on this website, it’s just I use MODX and these forums are filled with people in the same field as me and can help me with js/css/xhtml/php problems like this one smiley

            This is the body code of the [email protected] 

             
<!--Inner content DIVs should always carry "contentdiv" CSS class-->
<!--Pagination DIV should always carry "paginate-SLIDERID" CSS class-->

<div id="slider2" class="sliderwrapper">

<div class="contentdiv"><? include("slides/s_julia.php") ?><!-- #slide 1.julia-->
</div>

<div class="contentdiv"><? include("slides/s_flv8.php") ?><!-- #slide 2.flv8 -->
</div>

<div class="contentdiv">SLIDE3<!-- #slide 3.xxxxx-->
</div>

<div class="contentdiv">SLIDE4<!-- #slide 4.xxxxx-->
</div>

</div><!-- #slider2 -->
<div id="paginate-slider2" class="pagination">
<a id="s_1" class="toc"><span>1</span></a>
<a id="s_2" class="toc"><span>2</span></a>
<a id="s_3" class="toc"><span>3</span></a>
<a id="s_4" class="toc"><span>4</span></a>
</div><!-- #pagination -->
<script type="text/javascript">

featuredcontentslider.init({
    id: "slider2",  //id of main slider DIV
    contentsource: ["inline", ""],  //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
    toc: "markup",  //Valid values: "#increment", "markup", ["label1", "label2", etc]
    nextprev: ["Previous", "Next"],  //labels for "prev" and "next" links. Set to "" to hide.
    revealtype: "mouseover", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
    enablefade: [true, 0.1],  //[true/false, fadedegree]
    autorotate: [true, 2500],  //[true/false, pausetime]
    onChange: function(previndex, curindex){  //event handler fired whenever script changes slide
        //previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
        //curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
    }
})

</script>


            This is the css of the slider

            /* SLIDER */
.sliderwrapper { position: relative; /*leave as is*/ overflow: hidden; /*leave as is*/ width: 1000px; /*width of featured content slider*/ height: 400px; margin: 0 auto; }
.sliderwrapper .contentdiv { visibility: hidden; /*leave as is*/ position: absolute; /*leave as is*/ left: 0;  /*leave as is*/ top: 0;  /*leave as is*/ width: 1000px; /*width of content DIVs within slider. Total width should equal slider's inner width (390+5+5=400) */ height: 100%; filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);-moz-opacity: 1; opacity: 1; }
.pagination { width: 325px; /*Width of pagination DIV. Total width should equal slider's outer width (400+10+10=420)*/ padding-left: 675px;}
.pagination a { padding-left: 10px; text-decoration: none; }
#s_1 {float: left;width: 32px; height: 32px; background: url("slides/s_1.png") no-repeat 0 0; }
#s_1:hover {background-position: 0 -32px;  }
#s_1 span {display: none; }
#s_2 {float: left;width: 32px; height: 32px; background: url("slides/s_2.png") no-repeat 0 0; }
#s_2:hover {background-position: 0 -32px;  }
#s_2 span {display: none; }
#s_3 {float: left;width: 32px; height: 32px; background: url("slides/s_3.png") no-repeat 0 0; }
#s_3:hover {background-position: 0 -32px;  }
#s_3 span {display: none; }
#s_4 {float: left;width: 32px; height: 32px; background: url("slides/s_4.png") no-repeat 0 0; }
#s_4:hover {background-position: 0 -32px;  }
#s_4 span {display: none; }


            This is a link to the contentslider.js: http://k3rmit.org/nopaste/708
              • 10076
              • 1,024 Posts
              Frank Reply #6, 16 years, 1 month ago
              Affraid my programming/script knowledge is too limited to help you.
              Sorry, there are plenty around here that should be able to help.

              However I see some difference in your HTML annd the one here:

              dynamic drive But you probably want to wait some more for the folks that know their js.
                • 32070
                • 87 Posts
                webandflow Reply #7, 16 years, 1 month ago
                The "mouseover" question is just CSS....

                Here’s your code:
                #s_1 {float: left;width: 32px; height: 32px; background: url("slides/s_1.png") no-repeat 0 0; }
#s_1:hover {background-position: 0 -32px;  }
#s_1 span {display: none; }
#s_2 {float: left;width: 32px; height: 32px; background: url("slides/s_2.png") no-repeat 0 0; }
#s_2:hover {background-position: 0 -32px;  }
#s_2 span {display: none; }
#s_3 {float: left;width: 32px; height: 32px; background: url("slides/s_3.png") no-repeat 0 0; }
#s_3:hover {background-position: 0 -32px;  }
#s_3 span {display: none; }
#s_4 {float: left;width: 32px; height: 32px; background: url("slides/s_4.png") no-repeat 0 0; }
#s_4:hover {background-position: 0 -32px;  }
#s_4 span {display: none; }



                This could probably be cleaned up a little to help with readability, as well as add the desired functionality to this...
                a.toc {
	float: left;
	width: 32px;
	height: 32px; 
}

a.toc span {
	display: none;
}

a.toc:hover,
a.selected {
	background-position: 0 -32px ! important;
	/* 
	add the ! important here just in case, since
	you're dealing with multiple classes
	*/
}

#s_1 {
	background: url("slides/s_1.png") no-repeat 0 0;
}

#s_2 {
	background: url("slides/s_2.png") no-repeat 0 0;
}

#s_3 {
	background: url("slides/s_3.png") no-repeat 0 0;
}

#s_4 {
	background: url("slides/s_4.png") no-repeat 0 0;
}


                Or if you prefer single lines:
                a.toc {float: left; width: 32px; height: 32px; }
a.toc span {display: none;}
a.toc:hover,
a.selected {background-position: 0 -32px ! important; }
#s_1 {background: url("slides/s_1.png") no-repeat 0 0;}
#s_2 {background: url("slides/s_2.png") no-repeat 0 0;}
#s_3 {background: url("slides/s_3.png") no-repeat 0 0;}
#s_4 {background: url("slides/s_4.png") no-repeat 0 0;}


                Hope this helps.
                  Des
                  webandflowdesign.com
                  • 13094
                  • 58 Posts
                  iRolf Reply #8, 16 years, 1 month ago
                  Quote from: AR/Counterfire at Sep 15, 2010, 12:49 AM

                  Problem: So, as you can see the slider works fine, fades in fine etc. However, if you mouseover or click one of the pagination links to go to a particular slide then the slider stops playing, any idea why?

                  okay, let’s start with this:

                  I think it is UX standard to stop a slideshow (or whatever) if a user clicks on a navigation.
                  in your slider you initialize it with
                  revealtype: "mouseover", //Behavior of pagination links to reveal the slides: "click" or "mouseover"

                  maybe the "click" will continue the sliding show?


                  the auto highlighting of the pagination could be done by something like:
                  .pagination .selected {background-position: 0 -32px; }
                  if you take care of your images
                    • 5854
                    • 39 Posts
                    Counterfire Reply #9, 16 years, 1 month ago
                    maybe the "click" will continue the sliding show?

                    Nope, didn’t work undecided

                    the auto highlighting of the pagination could be done by something like:
                    .pagination .selected {background-position: 0 -32px; }
                    if you take care of your images

                    In the css file I added .pagination .selected {background-position: 0 -32px; } yet there was no change either sad

                      • 13094
                      • 58 Posts
                      iRolf Reply #10, 16 years, 1 month ago
                      okay, getting closer.
                      this one works with the css: .pagination .selected {background-position: 0 -32px !important; }

                      oh, and by the way: the click param works fine, too.
                      when clicking, animation stops at all (user controls the szene). if not try a strg-f5 to get rid from caching?