Page 1 of 2

Is there a good horizontal scroller, for images/text via DB?

Posted: Sat Apr 26, 2014 6:06 am
by simonmlewis
We need to create a dynamic horizontal scroller on a homepage.
It need to accommodate dynamic content from a database, that has an image, text, and both be hyperlinked per item in the scroll.

I've found a few online, but none seen to enable an image with text below it. I'm assuming it's all in a container div, but I need (I think) each internal element to be in a div of it's own.

It also needs to show 5 'images/text' at one time. Bit like you see in news pages.

Any help would be appreciated.

Re: Is there a good horizontal scroller, for images/text via

Posted: Sat Apr 26, 2014 8:01 am
by Celauran
Do you mean like a carousel? Something like this Bootply?

Re: Is there a good horizontal scroller, for images/text via

Posted: Sat Apr 26, 2014 3:06 pm
by simonmlewis
That is exactly what I need.
How do I download the files necessary to make that work, incl the arrow images.
I managed to add in the text and it worked brilliantly.

Just need to see how to get "hold" of it all...??

Re: Is there a good horizontal scroller, for images/text via

Posted: Sat Apr 26, 2014 3:18 pm
by Celauran
It's just using jQuery and Bootstrap. The images are glyph icons.

Re: Is there a good horizontal scroller, for images/text via

Posted: Mon Apr 28, 2014 8:29 am
by simonmlewis
I cannot see how to adjust the width of the box, without screwing up the rest of it.
I need to manually set the width and height of it.

If I use the code as is, and place it in a DIV on my page, is forces out a huge white space on the left.

Code: Select all

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
        <meta charset="utf-8">
        <title>Bootply.com - Bootstrap Bootstrap carousel show 4, advance 1</title>
        <title>http://www.bootply.com/94452</title>
        <meta name="generator" content="Bootply" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
        
        <style type="text/css">
            .carousel-inner .active.left { left: -25%; }
.carousel-inner .next        { left:  25%; }
.carousel-inner .prev		 { left: -25%; }
.carousel-control 			 { width:  4%; }
.carousel-control.left,.carousel-control.right {margin-left:15px;background-image:none;}
.col-xs-3 { text-align: center; }
.col-md-6 { border: 1px solid #cccccc; width: 950px;}
        </style>
    </head>
    
    <body  >
    <div style='width: 950px; margin-left: auto; margin-right: auto; border: 1px solid #cccccc'>
    
<div class="col-md-6 col-md-offset-3">
<div class="carousel slide" id="myCarousel">
  <div class="carousel-inner">
    <div class="item active">
      <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/e499e4/fff&text=1" class="img-responsive"><br/>adsfsafdsdf</a></div>
    </div>
    <div class="item">
      <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/e477e4/fff&text=2" class="img-responsive"><br/>adsfsafdsdf</a></div>
    </div>
    <div class="item">
      <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/eeeeee&text=3" class="img-responsive"><br/>adsfsafdsdf</a></div>
    </div>
    <div class="item">
      <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/f4f4f4&text=4" class="img-responsive"><br/>adsfsafdsdf</a></div>
    </div>
    <div class="item">
      <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/f566f5/333&text=5" class="img-responsive"><br/>adsfsafdsdf</a></div>
    </div>
    <div class="item">
      <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/f477f4/fff&text=6" class="img-responsive"><br/>adsfsafdsdf</a></div>
    </div>
    <div class="item">
      <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/eeeeee&text=7" class="img-responsive"><br/>adsfsafdsdf</a></div>
    </div>
    <div class="item">
      <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/fcfcfc/333&text=8" class="img-responsive"><br/>adsfsafdsdf</a></div>
    </div>
  </div>
  <a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
        
        <script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type='text/javascript' src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

        <script type='text/javascript'>        
        $(document).ready(function() {
            $('#myCarousel').carousel({
  interval: 4000
})

$('.carousel .item').each(function(){
  var next = $(this).next();
  if (!next.length) {
    next = $(this).siblings(':first');
  }
  next.children(':first-child').clone().appendTo($(this));
  
  for (var i=0;i<2;i++) {
    next=next.next();
    if (!next.length) {
    	next = $(this).siblings(':first');
  	}
    
    next.children(':first-child').clone().appendTo($(this));
  }
});
        
        });
        
        </script>
        
        <script>
          (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
          (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
          })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
          ga('create', 'UA-40413119-1', 'bootply.com');
          ga('send', 'pageview');
        </script>
        <!-- Quantcast Tag -->
        <script type="text/javascript">
        var _qevents = _qevents || [];
        
        (function() {
        var elem = document.createElement('script');
        elem.src = (document.location.protocol == "https:" ? "https://secure" : "http://edge") + ".quantserve.com/quant.js";
        elem.async = true;
        elem.type = "text/javascript";
        var scpt = document.getElementsByTagName('script')[0];
        scpt.parentNode.insertBefore(elem, scpt);
        })();
        
        _qevents.push({
        qacct:"p-0cXb7ATGU9nz5"
        });
        </script>
    </body>
</html>

Re: Is there a good horizontal scroller, for images/text via

Posted: Mon Apr 28, 2014 9:21 am
by simonmlewis
The problem is, it's setting the images to a percentage size.
I need to state: pixels wide. Pixels high. And control the width of the box.
The images are I think set by percentage. This really won't work for me.

Re: Is there a good horizontal scroller, for images/text via

Posted: Mon Apr 28, 2014 10:09 am
by simonmlewis
I've found more ideas like this, but they either have just one image showing, or lots but with lots of CSS around the images.
I don't mind editing the CSS, but there is such a vast amount of it, finding what I need to alter, is nigh-on impossible.

I either want a left/right chevron to move thru them, or just the mouse they the slider moves with you. But no dots below it (to show where you are), and no silly spacing.

Re: Is there a good horizontal scroller, for images/text via

Posted: Tue Apr 29, 2014 5:58 am
by simonmlewis
Found this one too:
http://plugins.jquery.com/jquery-scrollbox/
But you cannot control the position of the left/right scrolling buttons as their CSS is hosted elsewhere.

I did find one that worked nice, but once it's in an include file, or among other code, for some reason even tho it can see the JS files, it didn't work.

Re: Is there a good horizontal scroller, for images/text via

Posted: Tue Apr 29, 2014 6:23 am
by Celauran
You're unlikely to find any existing solution custom tailored to your exact requirements. Any of these will work fine, you'll just need to adjust the CSS and/or JS a little to your liking.

Re: Is there a good horizontal scroller, for images/text via

Posted: Tue Apr 29, 2014 6:26 am
by simonmlewis
I don't know JS at all.
If I run the one I found in it's own html file, it works. If I put that code into it's own .inc file, leaving all the links to JS and CSS as they are, it fails.
If I put it right at the top of the .php file, it fails.

It's a brilliant script, but once it's "inside" the site, it screws it up completely.

Re: Is there a good horizontal scroller, for images/text via

Posted: Tue Apr 29, 2014 6:34 am
by simonmlewis
The one you sent at http://www.bootply.com/94452 was really good. But I have no control over the size of the images, because as soon as you increase the width of the box, the images increase in size, and I cannot see how to override that.

It's brilliant - up to that point. I was to set it to a certain width, certain height, and control the images.

Re: Is there a good horizontal scroller, for images/text via

Posted: Tue Apr 29, 2014 9:40 am
by simonmlewis
Doing really well with this now. Got the positioning really nicely, but can't see how to change how many show on screen at one time.

Code: Select all

        <script type='text/javascript'>
        
        $(document).ready(function() {
        
            $('#myCarousel').carousel({
  interval: 9000
})

$('.carousel .item').each(function(){
  var next = $(this).next();
  if (!next.length) {
    next = $(this).siblings(':first');
  }
  next.children(':first-child').clone().appendTo($(this));
  
  for (var i=0;i<2;i++) {
    next=next.next();
    if (!next.length) {
    	next = $(this).siblings(':first');
  	}
    
    next.children(':first-child').clone().appendTo($(this));
  }
});
        
        });
        
        </script>
Look in here but nothing about "4"..... If I can get it to show FIVE at a time, I've sorted it.
I've got the width to fit in 5.

Re: Is there a good horizontal scroller, for images/text via

Posted: Tue Apr 29, 2014 9:52 am
by simonmlewis
Iv'e sussed it - got it absolutely bang on perfect.
:)

Re: Is there a good horizontal scroller, for images/text via

Posted: Wed Apr 30, 2014 4:17 am
by simonmlewis
Ok good news and bad news.

Good news is that the slider works really nicely.
Bad news is that I have on an internal home page, the "nivoslider" running.
This new slider has to be running on the homepage. But for some conflicts reason, both won't run at the same time. Nivo just gets the "swirling" animation circle.

If I put the Bootstrp JS file and Google JS file link at the very top or bottom the new slide works, but the Nivo doesn't.

Are these conflicts common, and is there some sort of solution to it?

Re: Is there a good horizontal scroller, for images/text via

Posted: Wed Apr 30, 2014 4:24 am
by simonmlewis
http://api.jquery.com/jQuery.noConflict/
I've found this, but unsure what it does.
Do you have to put it in the script, before the start of the Jquery?

Code: Select all

   <script type="text/javascript" src="/js/nivoslider/scripts/jquery-1.6.4.min.js"></script>
    <script type="text/javascript" src="/js/nivoslider/jquery.nivo.slider.pack.js"></script>
    <script type="text/javascript">
    $.noConflict();
    $(window).load(function() {
    
        $('#slider').nivoSlider();
    });
    </script>
This doesn't help.