Dynamically adding slide images inside slider - javascript

i am trying to dynamically add images in the slider called owl slider.
The problem is that i want to clear the divs inside the
.owl-wrapper
div and then add new items on a click.
The original code is
<div id="owl-demo" class="owl-carousel owl-theme">
<div class="item">
<img src="../img/car1.jpg" alt="The Last of us">
</div>
<div class="item">
<img src="../img/car2.jpg" alt="The Last of us">
</div>
<div class="item">
<img src="../img/car3.jpg" alt="The Last of us">
</div>
<div class="item">
<img src="../img/car4.jpg" alt="The Last of us">
</div>
</div>
Now i did this
$('.singleNewsItem').click(function () {
$('#owl-demo').append('<div class="item"><img src="../img/trac1.jpg"></div>');
});
});
Somehow its adding the image outside the main slider.
Please help .
thanks.


Try this:
// make sure it's initialized:
// $("#owl-demo").owlCarousel();
$('.singleNewsItem').click(function () {
// clean the container:
$('#owl-demo').text('');
var img = '<div class="item"><img src="../img/trac1.jpg"></div>';
$("#owl-demo").data('owlCarousel').addItem(img);
});
There is a demo with owl manipulation examples.
Demo with transistions.

Related

jquery show/hide content in div without hardcoding

I have 3 divs, there is content(images) inside of them. When you click on one of them content of it becomes visible and content of other two becomes hidden. I've been managed to achieve that with jquery code(you can check for it below), but the bad thing it's hardcoded, is there any other methods do do it?
P.S.: "https://solomia-gera.github.io/" is the site itself if you want to have a look.
---------------------------------------------------------THE CODE-----------------------------------------------------
<!-- Hide/Show DIV1 content-->
<script>
// Hide content in div with id#mox when cliked on div with id#content
$("#mox2").on("click", function () {
$("#content1").hide();
});
$("#mox3").on("click", function () {
$("#content1").hide();
});
// Show content in div with id#mox when cliked on div with id#content
$("#mox1").on("click", function () {
$("#content1").show();
});
</script>
<!-- Hide/Show DIV2 content-->
<script>
$("#content2").hide();
// Hide content in div with id#mox when cliked on div with id#content
$("#mox1").on("click", function () {
$("#content2").hide();
});
$("#mox3").on("click", function () {
$("#content2").hide();
});
// Show content in div with id#mox when cliked on div with id#content
$("#mox2").on("click", function () {
$("#content2").show();
});
</script>
<!-- Hide/Show DIV3 content-->
<script>
$("#content3").hide();
// Hide content in div with id#mox when cliked on div with id#content
$("#mox2").on("click", function () {
$("#content3").hide();
});
$("#mox1").on("click", function () {
$("#content3").hide();
});
// Show content in div with id#mox when cliked on div with id#content
$("#mox3").on("click", function () {
$("#content3").show();
});

Given that all three have a common class mox, and if you add a common class content to each of the content divs you can do this:
$(".mox").click(function() {
$(this).children(".content").show();
$(".mox").not(this).children(".content").hide();
}
Explanation: the function is called whenever you click on any element with a mox class. this selector lets you select the particular instance of the class that was clicked, children() selects any child elements and when we put a selector as an argument for children(), it selects all child elements that match that selector. Second line works similarly, with an addition of not(this), so the second line reads hide all elements that match content class and are children of any element with class mox, but this one.
EDIT: If for some reason you do not want to assign a common class to all content divs, the following function will work as is:
$(".mox").click(function() {
$(this).children("[id^=content]").show();
$(".mox").not(this).children("[id^=content]").hide();
}
Here I used attributeStartsWith selector, read more here.

There is much better way for doing this
You can simply use the following code
$('.content').on('click', '.img-heading', function(){
$(this).parent('.content').siblings('.content').removeClass('active');
$(this).parent('.content').addClass('active');
})
Codepen link

if your content is outside mox, you can apply a same class for each element and add a data for show only what you want.
$(".mox").on("click", function () {
var content = $(".content")
content.hide();
content.eq($(this).attr("data-content")-1).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mox" data-content="1">Show one</div>
<div class="mox" data-content="2">Show two</div>
<div class="mox" data-content="3">Show three</div>
<div class="content" style="display:none;width:100px;height:100px; background:red" ></div>
<div class="content" style="display:none;width:100px;height:100px; background:blue" ></div>
<div class="content" style="display:none;width:100px;height:100px; background:green" ></div>

try this code
$('.mox').on('click', function(){
$('.image_list').hide();
var $index = $('.mox').index(this);
$('.image_list').eq($index).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="box">
<div id="mox1" class="mox">
<p class="hide">
O<br>V<br>E<br>R<br>V<br>I<br>E<br>W
</p>
<div id="content1" class="image_list">
<img src="https://solomia-gera.github.io/img/1.jpg">
<img src="https://solomia-gera.github.io/img/2.jpg">
<img src="https://solomia-gera.github.io/img/3.jpg">
<img src="https://solomia-gera.github.io/img/4.jpg">
<img src="https://solomia-gera.github.io/img/5.jpg">
<img src="https://solomia-gera.github.io/img/6.jpg">
<img src="https://solomia-gera.github.io/img/7.jpg">
<img src="https://solomia-gera.github.io/img/8.jpg">
</div>
</div>
<!-- ALBUMS -->
<div id="mox2" class="mox">
<p class="">
A<br>L<br>B<br>U<br>M<br>S
</p>
<div id="content2" class="image_list">
<img src="https://solomia-gera.github.io/img/1.jpg">
<img src="https://solomia-gera.github.io/img/2.jpg">
<img src="https://solomia-gera.github.io/img/3.jpg">
<img src="https://solomia-gera.github.io/img/4.jpg">
<img src="https://solomia-gera.github.io/img/5.jpg">
<img src="https://solomia-gera.github.io/img/6.jpg">
<img src="https://solomia-gera.github.io/img/7.jpg">
<img src="https://solomia-gera.github.io/img/8.jpg">
</div>
</div>
<!-- ABOUT -->
<div id="mox3" class="mox">
<p class="">
A<br>B<br>O<br>U<br>T
</p>
<div id="content3" class="image_list">
<img src="https://solomia-gera.github.io/img/1.jpg">
<img src="https://solomia-gera.github.io/img/2.jpg">
<img src="https://solomia-gera.github.io/img/3.jpg">
<img src="https://solomia-gera.github.io/img/4.jpg">
<img src="https://solomia-gera.github.io/img/5.jpg">
<img src="https://solomia-gera.github.io/img/6.jpg">
<img src="https://solomia-gera.github.io/img/7.jpg">
<img src="https://solomia-gera.github.io/img/8.jpg">
</div>
</div>
</div>

Based on your code:
function myCustomHide(contentIds, moxsIds){
contentIds.forEach(function(element, index) {
index !== 0 ? $("#"+element).hide(): null;
moxsIds.forEach(function(moxElem, moxIndex){
if(index !== moxIndex){
$("#"+moxElem).on("click", function(){
$("#"+element).hide();
});
}
});
$("#"+moxsIds[index]).on("click", function(){
$("#"+element).show();
});
});
}
var contentsIds = [ "content1", "content2", "content3"];
var moxsIds = [ "mox1", "mox2", "mox3"];
myCustomHide(contentsIds, moxsIds);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<div id="mox1">
Overview
</div>
<div id="content1" class="image_list">
<img src="https://solomia-gera.github.io/img/1.jpg">
<img src="https://solomia-gera.github.io/img/2.jpg">
<img src="https://solomia-gera.github.io/img/3.jpg">
<img src="https://solomia-gera.github.io/img/4.jpg">
<img src="https://solomia-gera.github.io/img/5.jpg">
<img src="https://solomia-gera.github.io/img/6.jpg">
<img src="https://solomia-gera.github.io/img/7.jpg">
<img src="https://solomia-gera.github.io/img/8.jpg">
</div>
<!-- ALBUMS -->
<div id="mox2">
Albums
</div>
<div id="content2" class="image_list">
<img src="https://solomia-gera.github.io/img/1.jpg">
<img src="https://solomia-gera.github.io/img/2.jpg">
<img src="https://solomia-gera.github.io/img/3.jpg">
<img src="https://solomia-gera.github.io/img/4.jpg">
<img src="https://solomia-gera.github.io/img/5.jpg">
<img src="https://solomia-gera.github.io/img/6.jpg">
<img src="https://solomia-gera.github.io/img/7.jpg">
<img src="https://solomia-gera.github.io/img/8.jpg">
</div>
<!-- ABOUT -->
<div id="mox3">
About
</div>
<div id="content3" class="image_list">
<img src="https://solomia-gera.github.io/img/1.jpg">
<img src="https://solomia-gera.github.io/img/2.jpg">
<img src="https://solomia-gera.github.io/img/3.jpg">
<img src="https://solomia-gera.github.io/img/4.jpg">
<img src="https://solomia-gera.github.io/img/5.jpg">
<img src="https://solomia-gera.github.io/img/6.jpg">
<img src="https://solomia-gera.github.io/img/7.jpg">
<img src="https://solomia-gera.github.io/img/8.jpg">
</div>
</div>
or check the fiddle for slight different html: https://jsfiddle.net/oy7vj7fq/2/

issue | JQuery slide forces my page to scroll to the top

This my slide HTML :
<div class="slide_container">
<div class="one_slide">
<img alt="slide_img" class="slide_img img-responsive" src="images/slide2.jpg">
</div>
<div class="one_slide">
<img alt="slide_img" class="slide_img img-responsive" src="images/slide3.jpg">
</div>
<div class="one_slide">
<img alt="slide_img" class="slide_img img-responsive" src="images/slide4.jpg">
</div>
</div>
And the JQuery :
setInterval(function(){
$('.active').removeClass('active').addClass('old_active');
if($('.old_active').is(':last-child')){
$('.one_slide').first().addClass('active');
}
else{
$('.old_active').next().addClass('active');
}
$('.old_active').removeClass('old_active');
$('.one_slide').fadeOut(500);
$('.active').fadeIn(500);
},5000);
This is my JQuery slide, the problem with it is when the image change it's forcing my page to scroll to the top and i don't like this, i searched for the same issue but no result .

Try removing the 'href="#"', this is responsible for the upscrolling!

Masonry layout is loading with height 0px

I'm trying to load images into a simple masonry.js layout, with images loaded first, and it looks like masonry is applying height: 0px to both the grid and grid items. Any idea why this is happening? Here is the js I am using, and a codepen.
http://codepen.io/kathryncrawford/pen/WwGVNa
JS
jQuery(function ($) {
var $container = $('.js-grid').imagesLoaded( function() {
console.log("images are loaded");
$container.masonry({
itemSelector : '.js-masonry',
columnWidth: 100
});
});
});

If you inspect the HTML in the Masonry docs, you notice that img's are always wrapped inside a div. Just surround your img's with divs.
<div class="js-grid">
<div class="js-masonry">
<img src="http://www.placecage.com/200/600" alt="">
</div>
<div class="js-masonry">
<img src="http://www.placecage.com/400/200" alt="">
</div>
<div class="js-masonry">
<img src="http://www.placecage.com/100/200" alt="">
</div>
<div class="js-masonry">
<img src="http://www.placecage.com/200/200" alt="">
</div>
<div class="js-masonry">
<img src="http://www.placecage.com/200/300" alt="">
</div>
</div>
See codepen.

jQuery Show 1 Image on Load and Hide Others on Mouseover

Trying to get one image to load on page load and then hide the other three images. Then on mouseover hide the other three and show the appropriate image on hover. On load it works perfectly, but on hover all of the images disappear. Below is the code.
<!-- PHONE IMAGE -->
<div class="col-md-4 col-sm-4 phone-one">
<div id="blocrst-1" class="phone-image wow bounceIn" data-wow-offset="120" data-wow-duration="1.5s">
<img src="/images/single-iphone.png" alt="" data-animation="pulse" data-animation-delay="800" />
</div>
</div>
<!-- PHONE IMAGE -->
<div class="col-md-4 col-sm-4 phone-two">
<div id="blocrst-2" class="phone-image wow bounceIn" data-wow-offset="120" data-wow-duration="1.5s">
<img src="/images/single-iphone.png" alt="" data-animation="pulse" data-animation-delay="800" />
</div>
</div>
<!-- PHONE IMAGE -->
<div class="col-md-4 col-sm-4 phone-three">
<div id="blocrst-3" class="phone-image wow bounceIn" data-wow-offset="120" data-wow-duration="1.5s">
<img src="/images/single-iphone.png" alt="" data-animation="pulse" data-animation-delay="800" />
</div>
</div>
<!-- PHONE IMAGE -->
<div class="col-md-4 col-sm-4 phone-four">
<div id="blocrst-4" class="phone-image wow bounceIn" data-wow-offset="120" data-wow-duration="1.5s">
<img src="/images/venue-info.png" alt="" data-animation="pulse" data-animation-delay="800" />
</div>
</div>
jQuery:
<script>
jQuery().ready(function(){
$('.phone-two').hide();
$('.phone-three').hide();
$('.phone-four').hide();
$(function() {
$("#btnBrowseEvents").mouseover(function() {
$("#blocrst-1").removeClass().addClass("phone-image wow fadeInRight");
$('.phone-two').hide();
$('.phone-three').hide();
$('.phone-four').hide();
});
});
$(function() {
$("#btnBottleService").mouseover(function() {
$("#blocrst-2").removeClass().addClass("phone-image wow fadeInRightBig");
$('.phone-one').hide();
$('.phone-three').hide();
$('.phone-four').hide();
});
});
$(function() {
$("#btnConnect").mouseover(function() {
$("#blocrst-3").removeClass().addClass("phone-image wow fadeInLeft");
$('.phone-one').hide();
$('.phone-two').hide();
$('.phone-four').hide();
});
});
$(function() {
$("#btnYourDigitalHost").mouseover(function() {
$("#blocrst-4").removeClass().addClass("phone-image wow fadeInLeft");
$('.phone-one').hide();
$('.phone-two').hide();
$('.phone-three').hide();
});
});
});//end ready
</script>

You first do
$('.phone-two').hide();
$('.phone-three').hide();
$('.phone-four').hide();
but subsequently never call show on any of these elements. The
$("#blocrst-2").removeClass().addClass("phone-image wow fadeInRightBig");
affects the img elements, but the parents are still hidden. Adding a
$('.phone-one').show(); in your mouseover functions will fix your problem. Remember to change the phone-one to match the class of the div you're trying to show (you should really be using an id for these divs).
As an aside, take a look at the developer tools in chrome or firefox. It'll help you see how your javascript affects your DOM so you can track down issues more easily in the future.

Image effect in website

Please can anyone tell me the coding in terms of Js, css for displaying image effect like one in http://dalailama.com/ ie changing of images one after another. If possible let me know about adding video link in the sidebar with the minor screen.

This should do the trick:
HTML:
<div id="testers">
<div class="tester">
<img src="http://regmedia.co.uk/2008/03/18/google_adwords_machine.png" alt="" />
</div>
</div>
<div id="morework">
<div class="holderdiv">
<div class="tester">
<img src="http://www.swwebs.co.uk/images/google-pagerank.jpg" alt="" />
</div>
</div>
<div class="holderdiv">
<div class="tester">
<img src="http://regmedia.co.uk/2008/03/18/google_adwords_machine.png" alt="" />
</div>
</div>
</div>
CSS:
#morework{display:none;}
jQuery:
$(document).ready(function(){
function runIt(){
$('#morework').find('.holderdiv').each(function(i, elem) {
$("#testers").delay(5000).fadeOut(1000, function() {
$(this).html($(elem).html());
}).fadeIn(1000, runIt);
});
};
runIt()
});
Check it out in action here - http://jsfiddle.net/sfsPx/

Categories