For one of my client's brochure websites, I am using the Bootstrap carousel. The carousel has 6 panels, each displaying a fairly large image.
To speed initial load time, I'm toying with the idea of only including two panels in the page's source, and somehow using JavaScript to append additional panels after the page is loaded to the DOM. That is, I want to lazy load additional panels to the carousel; hopefully they'll be in place before the carousel needs to display them (my carousel is set to change panels every 4 seconds, so two initial panels gives me 8 seconds to append a third panel).
How can I add panels to an existing carousel?
HTML:
<div id="home_pictures" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<img src="img/carousel_wellness.jpg" alt="Wellness: Comprehensive approaches for your individual needs" />
<div class="container">
<div class="carousel-caption">
<h2>Wellness</h2>
<p class="lead">Comprehensive approaches for your individual needs</p>
</div>
</div>
</div>
<div class="item">
<img src="img/carousel_psychotherapy.jpg" alt="Psychotherapy: Increase your sense of your own well-being" />
<div class="container">
<div class="carousel-caption">
<h2>Psychotherapy</h2>
<p class="lead">Increase your sense of your own well-being</p>
</div>
</div>
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#home_pictures" data-slide="prev">‹</a>
<a class="carousel-control right" href="#home_pictures" data-slide="next">›</a>
</div>
This JavaScript, which uses JSON for lightweight object definition and jQuery to append the panels, seems to do the trick nicely:
$(document).ready(function() {
if( $html_js.find('#home_pictures').length ) {
var $carousel_inner=$('div.carousel-inner'),
carousel_panels = [{
"title" : "Massage",
"img_src" : "carousel_massage.jpg",
"description": "Promote healing, relaxation and well-being"
},
{
"title" : "Nutritional Therapy",
"img_src" : "carousel_nutrition.jpg",
"description": "Change behaviors, eat well, feel well"
},
{
"title" : "Reiki",
"img_src" : "carousel_reiki.jpg",
"description": "Facilitate self-healing and equilibrium"
},
{
"title" : "Chiropractic Treatment",
"img_src" : "carousel_chiropractic.jpg",
"description": "Adjustments to realign pain away"
}];
for(var i = 0; i < carousel_panels.length; i++) {
var panel = carousel_panels[i];
$carousel_inner.append( '<div class="item"><img src="img/'+panel.img_src+'" alt="'+panel.title+': '+panel.description+'" /><div class="container"><div class="carousel-caption"><h2>'+panel.title+'</h2><p class="lead">'+panel.description+'</p></div></div></div>' );
}
};
});
The finished result is available at http://fallschurchwellness.com/
This solution applies the answer for "JavaScript loop through json array?"
Related
'The generator works and displays over the first image but I lose it on the second and third then it appears again with a different quote over the first slide again the way it should and I'm lost as to why' I've tried numerous things to figure this out and know it's probably very simple. I looked at ajax and jquery but still couldn't find the answer.
//Begin the Random Quote function of 'generateQuote'
document.addEventListener("DOMContentLoaded", function(){
var myCarousel = document.getElementById("myCarousel");
myCarousel.addEventListener("slide.bs.carousel", function(){
generateQuote();
document.getElementById("generate").innerHTML = 'myCarousel';
});
});
const generateQuote = function() {
const quotes = [
{
quote: "Do not pity the dead, Harry. Pity the living, and, above all those who live without love.",
author: "Albus Dumbledore"
},
{
quote: "It is impossible to manufacture or imitate love",
author: "Horace Slughorn"
},
{
quote: "Being different isn't a bad thing. It means that you are brave enough to be yourself.",
author: "Luna Lovegood"
},
{
quote: "If you want to know what a man’s like, take a good look at how he treats his inferiors, not his equals.",
author: "Sirius Black"
},
{
quote: "Never trust anything that can think for itself if you can’t see where it keeps its brain.",
author: "Arthur Weasley"
},
{
quote: "Every human life is worth the same, and worth saving.",
author: "Kingsley Shacklebolt"
},
{
quote: "Have a biscuit, Potter.",
author: "Minerva McGonagall"
},
{
quote: "Happiness can be found even in the darkest of times, if one only remembers to turn on the light.",
author: "Albus Dumbledore"
},
{
quote: "Socks are Dobby’s favorite, favorite clothes, sir!",
author: "Dobby"
}
];
let arrayIndex = Math.floor(Math.random() * quotes.length);
document.getElementById("quotes").innerHTML = quotes[arrayIndex].quote;
document.getElementById("author").innerHTML = quotes[arrayIndex].author;
}
'The myBox and text class align the quotes in the upper right of the image and it works like it' 'should but just on the first image then I get nothing until it cycles thru again. Thanks.'
<!-- The Start of the main Carousel-->
<div class="container-lg my-3">
<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
<!-- Carousel indicators -->
<ol class="carousel-indicators">
<li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
<li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>
</ol>
<!-- Wrapper for carousel items -->
<div class="carousel-inner">
<div class="carousel-item active">
<!--The Quotes for the first image-->
<div class="mybox">
<img id="generate" src="images/mockup1.jpg" class="d-block w-100" alt="Slide 1">
<div class="text">
<p id="quotes"></p>
<p id="author"></p>
</div></div>
<!-- End of the first image Quotes-->
</div>
<div class="carousel-item">
<!--The Quotes for the second image-->
<div class="mybox">
<img id="generate" src="images/mockup2.jpg" class="d-block w-100" alt="Slide 2">
<div class="text">
<p id="quotes"></p>
<p id="author"></p>
</div></div>
<!-- End of Second image-->
</div>
<div class="carousel-item">
<!--The Quotes for the Third image-->
<div class="mybox">
<img id="generate3" src="images/mockup3.jpg" class="d-block w-100" alt="Slide 3">
<div class="text">
<p id="quotes"></p>
<p id="author"></p>
</div></div>
<!-- End of Third image-->
</div>
</div>
<!-- Carousel controls -->
<a class="carousel-control-prev" href="#myCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#myCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
There appears to be an issue in the following line:
myCarousel.addEventListener("slide.bs.carousel", function(){
You have passed a CSS selector slide.bs.carousel as the first argument to addEventListener. This should be the event it's listening for, e.g., click.
I am currently trying to remove the arrows from the carousel when there is no image present. The reason for me trying to do so, is simply because I am trying to load several images into a carousel from a database into a given section. This section is recreated multiple times and it doesn't always contain images.
The issue that I am having is that, whenever the bootstrap carousel doesn't have any images loaded, it just displays the carousel arrows on the side. This gives a bad look to the current section and I would like to dispose of that.
How can I remove the carousel arrows when there aren't any images
loaded in the carousel?
Here is a JsFiddle which contains what I've done so far, it is heavy inspired by several other posts. This only removes the left arrow on the first slide and the right arrow on the last slide.
Here you can preview how does the carousel look whenever there are absent images. I have set a black background of 400px in order for the arrows to be more easily spotted. Absent Images JsFiddle
Here is the code I have so far:
<div class="container">
<div id="main_area">
<!-- Slider -->
<div class="row">
<div class="col-xs-12" id="slider">
<!-- Top part of the slider -->
<div class="row">
<div class="col-sm-8" id="carousel-bounding-box">
<div class="carousel slide" id="myCarousel">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item" data-slide-number="0">
<img src="http://placehold.it/770x300&text=one"></div>
<div class="item" data-slide-number="1">
<img src="http://placehold.it/770x300&text=two"></div>
<div class="item" data-slide-number="2">
<img src="http://placehold.it/770x300&text=three"></div>
<div class="item" data-slide-number="3">
<img src="http://placehold.it/770x300&text=four"></div>
<div class="item" data-slide-number="4">
<img src="http://placehold.it/770x300&text=five"></div>
<div class="item" data-slide-number="5">
<img src="http://placehold.it/770x300&text=six"></div>
</div><!-- Carousel nav -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next" id="arrow-right">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</div>
</div>
</div><!--/Slider-->
</div>
JQuery Code:
jQuery(document).ready(function($) {
$('.carousel').carousel({
interval: false,
})
$(document).ready(function () { // on document ready
checkitem();
});
$('#myCarousel').on('slid.bs.carousel', checkitem);
function checkitem() // check function
{
var $this = $('#myCarousel');
if ($('.carousel-inner .item:first').hasClass('active')) {
$this.children('.left.carousel-control').hide();
} else if ($('.carousel-inner .item:last').hasClass('active')) {
$this.children('.right.carousel-control').hide();
} else {
$this.children('.carousel-control').show();
}
}
$("img").error(function(){
$(this).hide('#arrow-right');
});
});
Here are the answers that I've already checked for solutions:
Link 1Link 2
Thank you in advance.
Using jQuery you could try something like..
$(document).ready(function(){
if($('.carousel-inner .item img').attr('src') == '') {
$('.carousel-control').css('display', 'none');
}
});
fiddle
I have 50 divs like the below, and the image is not clickable. I would like to make the image clickable, depending on what link the div contains: it is always the href link in the article_title tag.
How can I achieve this with adding just a few lines of JavaScript?
I was thinking of adding an ID to each img tag manually, and then use getElementById and do some magic, but that would take too long.
<div class="col-md-4 article">
<img src="7tips.jpg" alt="Canary Wharf" title="7 Tips For Lasting In Your Career" width="324" height="235">
<div class="article_category">
<a href=”http://www.canarywharfian.co.uk/forums/wealth-management/”>Wealth Management</a>
</div>
<div class="article_meta">
<h1 class="article_title">7 Tips For Lasting In Your Career</h1>
<div class="col-md-6 author_date">SmallCapPM - <span class="date"> Mar 10, 2016</span></div>
<div class="article_abstract">
Many of you are hoping and planning for a long and successful career in finance...
</div>
</div>
</div>
Maybe this (using jQuery):
<script>
$(document).ready(function () {
$('.block').each(function( index, value ) {
let href = $(this).find('a[href]').attr('href');
$(this).find('img').wrap('<a href=' + href + '></a>');
});
});
</script>
if you use jQuery, you can simply wrapping the images with element.
$(function(){
// traversing all the images
$('img').each(function(){
// get the link by finding from parent
var link = $(this).parent().find('.article_title a').attr('href');
// replace the image with link + image
$(this).replaceWith('' + $(this)[0].outerHTML + '');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div class="col-md-4 article">
<img src="http://www.canarywharfian.co.uk/7tips.jpg" alt="Canary Wharf" title="7 Tips For Lasting In Your Career" width="324" height="235">
<div class="article_category">
Wealth Management
</div>
<div class="article_meta">
<h1 class="article_title">7 Tips For Lasting In Your Career</h1>
<div class="col-md-6 author_date">SmallCapPM - <span class="date"> Mar 10, 2016</span></div>
<div class="article_abstract">
Many of you are hoping and planning for a long and successful career in finance...
</div>
</div>
</div>
Per your tag of vanila Javascript, what you can do is to search for and cache all your articles. Within each article search for anchor inside your title and set its href to a newly created anchor. Append the image into the newly created anchor and prepend it into your article.
A simple example (H1 font-size reduced for demo):
var articles = document.getElementsByClassName('article');
[].forEach.call(articles, function(article) {
var image = article.querySelector('img:first-child');
var title = article.querySelector('h1.article_title > a');
var anchor = document.createElement('a');
anchor.href = title.href;
anchor.appendChild(image);
article.insertBefore(anchor, article.firstChild);
});
h1 { font-size: 12px; }
<div class="col-md-4 article">
<img src="//placehold.it/120x64" alt="Canary Wharf" title="7 Tips For Lasting In Your Career">
<div class="article_category">
Wealth Management
</div>
<div class="article_meta">
<h1 class="article_title">7 Tips For Lasting In Your Career</h1>
<div class="col-md-6 author_date">SmallCapPM - <span class="date"> Mar 10, 2016</span></div>
<div class="article_abstract">
Many of you are hoping and planning for a long and successful career in finance...
</div>
</div>
</div>
<hr/>
<div class="col-md-4 article">
<img src="//placehold.it/120x64" alt="Canary Wharf" title="7 Tips For Lasting In Your Career">
<div class="article_category">
Wealth Management
</div>
<div class="article_meta">
<h1 class="article_title">7 Tips For Lasting In Your Career</h1>
<div class="col-md-6 author_date">SmallCapPM - <span class="date"> Mar 10, 2016</span></div>
<div class="article_abstract">
Many of you are hoping and planning for a long and successful career in finance...
</div>
</div>
</div>
Notice, how the links to bing and google are picked up from the title anchors and inserted into a new anchor wrapping the images.
I'm trying to create an array of nested divs, in which I only need to change 3 values when writing the divs to the document (html).
My divs look like this:
<div class="item">
<div class="item-h"> <a class="item-anchor" href="1_water_bottle.html">
<div class="item-image"> <img class="item-image-first" src="images/img_1_water_bottle.png" alt="">
<div class="item-meta">
<h2 class="title">Water Bottle 1</h2>
<span class="item-arrow"></span> </div>
</div>
</a> </div>
</div>
I need to create an array of about 50 items, and then use the document.write function to write 4 of those arrays for each page, as a section for "similar stuff".
I searched on stackoverflow, and came up with :: this page :: , which explains how to create an array in javascript, and then found another script that uses the document.write function.
The script uses an array of categories, to populate a form selection. And it does so, but using an array : (var categories = new Array("a1", "a2", "a3", ...) and so on.
for(var hi=0; hi<categories.length; hi++)
document.write("<option value=\""+categories[hi]+"\">"+categories[hi]+"</option>");
Could I use these two scripts to populate a section with 4 items from the array of the divs?
If so, then how could I do it? I know it can be done in php, but don't know if this can be done in javascript.
I tried, and created this array in notepad++, but the code wasn't recognized as a string, per array element...
var array_divs = [
$('<div class="item">
<div class="item-h"> <a class="item-anchor" href="1_water_bottle.html">
<div class="item-image"> <img class="item-image-first" src="images/img_1_water_bottle.png" alt="">
<div class="item-meta">
<h2 class="title">Water Bottle 1</h2>
<span class="item-arrow"></span> </div>
</div>
</a> </div>
</div>') ,
$('<div class="item">
<div class="item-h"> <a class="item-anchor" href="1_water_bottle_2.html">
<div class="item-image"> <img class="item-image-first" src="images/img_1_water_bottle_2.png" alt="">
<div class="item-meta">
<h2 class="title">Water Bottle 2</h2>
<span class="item-arrow"></span> </div>
</div>
</a> </div>
</div>')
]
Trying to populate the section, with selective items from the array, for example:
document.write(array_divs[1],array_divs[2]);
I haven't tried this, but since notepad++ didn't treat my div as a string, I had to search again... but couldn't find any info regarding this.
Thanks for any help.
-
I am working on a page for my portfolio website that displays various services. There's a large box in the center column of three columns. On the left and right of the central box are columns of 3 boxes each. Each box is a clickable link that then changes the content in the central block.
I'm trying to make the boxes on the sides of the central box grow in height on mouseover and shrink on mouseout using jQuery .animate().
My problem is that the boxes are very spastic. When you mouseout of one and go to another sometimes it will shrink and then grow and then shrink again. How can I force them to stop growing and shrinking a 2nd time?
Here's the link to the page in question: http://www.nukamedia.com/beta/services.html
Here's the jQuery code:
var classes = ".how-it-works, .built-for-power, .done-on-time, .inform-your-customers, .spread-the-word, .keep-in-contact";
$(classes).on("mouseover", function() {
$(this).animate({height: '+=20px'},500);
});
$(classes).on("mouseout", function() {
$(this).animate({height: '-=20px'},500);
});
Here's the HTML Markup:
<div class="services-content container">
<div class="row">
<div class="left-control-squares twocol">
<div class="how-it-works box-defaults">
Learn<br/>
How It<br/>
<span>Works</span>
</div>
<div class="built-for-power box-defaults box-text-align">
Built For<br/>
<span>Power</span>
</div>
<div class="done-on-time box-defaults box-text-align">
Done On<br/>
<span>Time</span>
</div>
</div>
<div class="eightcol" id="content-square">
<img src="images/click-to-learn.png" />
</div>
<div class="right-control-squares twocol last">
<div class="inform-your-customers box-defaults">
Inform<br/>
Your<br/>
<span>Customers</span>
</div>
<div class="spread-the-word box-defaults box-text-align">
Spread The<br/>
<span>Word</span>
</div>
<div class="keep-in-contact box-defaults box-text-align">
Keep In<br/>
<span>Contact</span>
</div>
</div>
</div>
</div>
You should consider using the jQuery stop() function. This will stop the animation in its tracks.
$("#myelm").stop().animate({height : "300px"});