Is there a good horizontal scroller, for images/text via DB?
Moderator: General Moderators
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Is there a good horizontal scroller, for images/text via DB?
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.
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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: Is there a good horizontal scroller, for images/text via
Do you mean like a carousel? Something like this Bootply?
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: Is there a good horizontal scroller, for images/text via
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...??
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...??
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: Is there a good horizontal scroller, for images/text via
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.
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>Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: Is there a good horizontal scroller, for images/text via
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.
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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: Is there a good horizontal scroller, for images/text via
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.
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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: Is there a good horizontal scroller, for images/text via
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.
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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: Is there a good horizontal scroller, for images/text via
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.
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: Is there a good horizontal scroller, for images/text via
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.
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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: Is there a good horizontal scroller, for images/text via
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.
It's brilliant - up to that point. I was to set it to a certain width, certain height, and control the images.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: Is there a good horizontal scroller, for images/text via
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.
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.
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>I've got the width to fit in 5.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: Is there a good horizontal scroller, for images/text via
Iv'e sussed it - got it absolutely bang on perfect.

Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: Is there a good horizontal scroller, for images/text via
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?
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?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: Is there a good horizontal scroller, for images/text via
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?
This doesn't help.
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>Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.