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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Mar 2014
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Tying sliders and data from the CMS together through JS.

    Hi,

    I'm not an experienced coder and this is my first post here, sorry if I say something unreasonable or grossly inappropriate.

    I'm currently stuck on a project where I want to use JavaScript to tie several separate systems together. The end result I'm looking for is a slider containing several images (served by the cms), where the current image in the slider is applied as background image in a div. I'm using BXslider for the slider and Koken for the cms.

    I guess the best way to achieve this is by creating an array of the different image addresses and getting the right image address every time the slider moves.

    BXslider has the following functionality for detecting slide movement:
    onSlideAfter
    Executes immediately after each slide transition. Function argument is the current slide element (when transition completes).
    default: function(){}
    options: function($slideElement, oldIndex, newIndex){ // your code here }
    arguments:
    $slideElement: jQuery element of the destination element
    oldIndex: element index of the previous slide (before the transition)
    newIndex: element index of the destination slide (after the transition)
    A simplified version of my slider div code:
    Code:
    <div id="pixels">
        <div class="slider_container">
            <ul id="slider2">
                <li>
                    <img src=[CMS INSERT IMAGE] onload="pixelArray ([CMS INSERT IMAGE])" />
                </li>
                <li>
                    <img src=[CMS INSERT IMAGE] onload="pixelArray ([CMS INSERT IMAGE])" />
                </li>
            </ul>
        </div>
    </div>
    My .js file:
    Code:
    var pixelBg = [];
    
    function pixelArray (link)
    	{
    		pixelBg.push (link);
    	}
    
    $(document).ready(function(){
        
    		$('.slider2').bxSlider({
    		  onSlideAfter: function($slideElement, oldIndex, newIndex){
    			  pixelSetBg (newIndex);
    		  }
    		});
      });
      
    function pixelSetBg (newIndex)
    	{
    		pixelDiv = document.getElementById ("pixels");
            	pixelDiv.style.backgroundImage = "url('" + pixelArray[newIndex] + "')";	
    	}
    My questions
    1. Am I going in the right direction or is there an easier way of achieving this?
    2. Is "img onload" the right place, time and code for adding items to the array? I seriously doubt it, but I don't know what else to use.
    3. What else am I doing wrong?
    4. Any other advice?


    I really hope somebody can help me here. Even a "You've got it all wrong" would be appreciated. If my explanation is unclear or more information is needed, please tell me.

  • #2
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    353
    Thanks
    9
    Thanked 52 Times in 51 Posts
    Welcome aboard, Quistnix.

    I think you've mistyped the last line (see red code)?
    Code:
    function pixelSetBg (newIndex)
    	{
    		pixelDiv = document.getElementById ("pixels");
            	pixelDiv.style.backgroundImage = "url('" + pixelBg[newIndex] + "')";	
    	}
    Also, what does BXSlider mean by newIndex: the index of the image <img> or the list element <li>? If it's the latter, then I think you'll just have a very tiny bug in there. Eventually, total images loaded will be equal to the number of list elements, right? However, the order in pixelBg array might not be the same as the order of the list <li> in HTML. That's all

  • Users who have thanked hdewantara for this post:

    Quistnix (04-01-2014)

  • #3
    New to the CF scene
    Join Date
    Mar 2014
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks! That solved most of my problems and allowed me to figure out the rest. :-)


  •  

    Posting Permissions

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