Below this is my royal slider code. This slider shows images only. I want to add video on this royal slider.I tried and also google but can't fine this type of solution. How can I do it? Thank you.
HTML:
<div class="slideholder">
<div class="royalSlider rsDefault">
<div class="rsContent">
<img class="rsImg" src="img/1.jpg" />
</div>
<div class="rsContent">
<img class="rsImg" src="img/2.jpg" />
</div>
<div class="rsContent">
<img class="rsImg" src="img/3.jpg" />
</div>
</div>
</div>
CSS:
.royalSlider{
margin:0 auto;
max-width:600px;
width:auto;
}
JavaScript:
<script>
jQuery(document).ready(function($) {
$(".royalSlider").royalSlider({
transitionType:'move',
imageScaleMode: 'fill',
autoScaleSlider:true,
autoScaleSliderWidth:100+'%',
autoScaleSliderHeight:'auto',
autoHeight:true
});
});
</script>
Try adding the video to the div like the below code
<div class="slideholder">
<div class="royalSlider rsDefault">
<div class="rsContent">
<img class="rsImg" src="img/1.jpg" />
</div>
<div class="rsContent">
<img class="rsImg" src="img/2.jpg" />
</div>
<div class="rsContent">
<video controls>
<source src="img/4.mp4" type="video/mp4">
<source src="img/4.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
</div>
</div>
<div id="full-width-slider">
<div class="rsContent" data="royalSlider">
<div>
<img class="rsImg" src="image.jpg" data-rsVideo="https://vimeo.com/44878206" />
</div>
</div>
</div>
<script>
// start video autoplay
jQuery(document).ready(function ($)
{
$('#full-width-slider').data('royalSlider').playVideo();
});
</script>
Related
I have a web page which has 5 panels in different colors. And there is navigation bullet on right side of the page.
When scrolling the page I want each section to linked with the navigation bullets. Bullet should have active class based on which slide is shown on the viewport.
Any help would be appreciated.
DEMO
I have taken your code in my local and applied below JS and after that its working fine.
Just add Scrollit.Js in your project.
Just you have to do minor changes in your CSS file like below.
In your CSS file line no. #55
.parallax_nav a:active,
.parallax_nav a:focus,
.parallax_nav a.js--active {
background: #f5f5f1;
opacity: 1;
}
just replaxe it with
.parallax_nav a:active,
.parallax_nav a:focus,
.parallax_nav a.active {
background: #f5f5f1;
opacity: 1;
}
It will be working fine like as you want. Per section it will be apply active class on your <a> tag.
I have made few changes to your code to scroll to the div on click. For onscroll highlight, use scrollspy.js or go with bootstrap navigation.
I personally recommend you to use bootstrap.
<body class="page-loaded">
<div id="page" class="hfeed site full-height">
<div class="page-wrap full-height">
<div class="main full-height" role="main">
<div id="" class="content full-height">
<div class="parallax_boxs">
<div id="black" class="parallax_box">
<div class="parallax_box_inner parallax_box_inner_box1">
<div class="parallax_box_clip">
<div class="parallax_box_phone">
<div class="mobile_responsive">
<div class="mobile_responsive_inner">
<div class="mobile_responsive_bg">
<div class="responsive_bg_wrap" data-reveal-bg="1">
<img alt="" aria-hidden="true" width="377" height="787" src="images/phone.png">
</div>
</div>
<div class="mobile_reveal">
<div class="mobile_reveal_wrap" data-reveal-wrap="1">
<video loop="" autoplay="" id="video--1" poster="/assets/video/quizup-poster.jpg">
<source src="video/boostyourearnings.mov" type="video/mp4">
</video>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="wrap">
<div class="parallax_box__content" style="opacity: 1;">
<div class="pbox_left">
fhffdhfd
</div>
<div class="pbox_right">
<h3>rehr</h3>
<p>fshrsh <a target="_blank" class="link--invisible" href="https://fueled.com/android-app-design">Android app</a>.</p>
</div>
</div>
</div>
</div>
</div>
<div id="green" class="parallax_box ">
<div class="parallax_box_inner parallax_box_inner_box2">
<div class="parallax_box_clip">
<div class="parallax_box_phone">
<div class="mobile_responsive">
<div class="mobile_responsive_inner">
<div class="mobile_responsive_bg">
<div class="responsive_bg_wrap" data-reveal-bg="2">
<img alt="" aria-hidden="true" width="377" height="787" src="images/phone.png">
</div>
</div>
<div class="mobile_reveal">
<div class="mobile_reveal_wrap" data-reveal-wrap="2">
<video loop="" autoplay="" id="video--2" poster="/assets/video/sunnycomb-poster.jpg">
<source src="video/engageyourfanbase.mov" type="video/mp4">
</video>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="wrap">
<div class="parallax_box__content" style="opacity: 1;">
<div class="pbox_left">
xvdshdsh
</div>
<div class="pbox_right">
<h3>resheh</h3>
<p>rehrh</p>
</div>
</div>
</div>
</div>
</div>
<div id="blue" class="parallax_box ">
<div class="parallax_box_inner parallax_box_inner_box3">
<div class="parallax_box_clip">
<div class="parallax_box_phone">
<div class="mobile_responsive">
<div class="mobile_responsive_inner">
<div class="mobile_responsive_bg">
<div class="responsive_bg_wrap" data-reveal-bg="3">
<img alt="" aria-hidden="true" width="377" height="787" src="images/phone.png">
</div>
</div>
<div class="mobile_reveal">
<div class="mobile_reveal_wrap" data-reveal-wrap="3">
<video loop="" autoplay="" id="video--3" poster="/assets/video/afterlight-poster.jpg">
<source src="video/showcaseyourvideosfirst.mov" type="video/mp4">
</video>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="wrap">
<div class="parallax_box__content" style="opacity: 1;">
<div class="pbox_left">
sgagash
</div>
<div class="pbox_right">
<h3>Trhr</h3>
<p>shsh</p>
</div>
</div>
</div>
</div>
</div>
<div id="grey" class="parallax_box ">
<div class="parallax_box_inner parallax_box_inner_box4">
<div class="parallax_box_clip">
<div class="parallax_box_phone">
<div class="mobile_responsive">
<div class="mobile_responsive_inner">
<div class="mobile_responsive_bg">
<div class="responsive_bg_wrap" data-reveal-bg="4">
<img alt="" aria-hidden="true" width="377" height="787" src="images/phone.png">
</div>
</div>
<div class="mobile_reveal">
<div class="mobile_reveal_wrap" data-reveal-wrap="4">
<video loop="" autoplay="" id="video--4" poster="/assets/video/keyme-poster.jpg">
<source src="video/trackwhatyouredoing.mov" type="video/mp4">
</video>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="wrap">
<div class="parallax_box__content" style="opacity: 1;">
<div class="pbox_left">
eaheheh
</div>
<div class="pbox_right">
<h3>shdh</h3>
<p>srehrh</p>
</div>
</div>
</div>
</div>
</div>
<div id="red" class="parallax_box ">
<div class="parallax_box_inner parallax_box_inner_box5">
<div class="parallax_box_clip">
<div class="parallax_box_phone">
<div class="mobile_responsive">
<div class="mobile_responsive_inner">
<div class="mobile_responsive_bg">
<div class="responsive_bg_wrap" data-reveal-bg="5">
<img alt="" aria-hidden="true" width="377" height="787" src="images/phone.png">
</div>
</div>
<div class="mobile_reveal">
<div class="mobile_reveal_wrap" data-reveal-wrap="5">
<video loop="" autoplay="" id="video--5" poster="/assets/video/athlete-minder-poster.jpg">
<source src="video/youcalltheshots.mov" type="video/mp4">
</video>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="wrap">
<div class="parallax_box__content" style="opacity: 1;">
<div class="pbox_left">
ehwhewhewh
</div>
<div class="pbox_right">
<h3>Cdxhrhs</h3>
<p>fdh</p>
</div>
</div>
</div>
</div>
</div>
<div class="parallax_nav">
<a id="black-btn" href="#black" class="js--active">Link</a>
<a id="green-btn" href="#green" >Link</a>
<a id="blue-btn" href="#blue" >Link</a>
<a id="grey-btn" href="#grey" >Link</a>
<a id="red-btn" href="#red" >Link</a>
</div>
</div>
</div>
</div>
</div>
</div>
Javascript
$(document).ready(function(){
$('#green-btn').on('click',function(){
$('#green-btn').addClass("js--active");
$('#black-btn').removeClass("js--active");
$('#blue-btn').removeClass("js--active");
$('#grey-btn').removeClass("js--active");
$('#red-btn').removeClass("js--active");
});
$('#black-btn').on('click',function(){
$('#green-btn').removeClass("js--active");
$('#black-btn').addClass("js--active");
$('#blue-btn').removeClass("js--active");
$('#grey-btn').removeClass("js--active");
$('#red-btn').removeClass("js--active");
});
$('#blue-btn').on('click',function(){
$('#green-btn').removeClass("js--active");
$('#black-btn').removeClass("js--active");
$('#blue-btn').addClass("js--active");
$('#grey-btn').removeClass("js--active");
$('#red-btn').removeClass("js--active");
});
$('#grey-btn').on('click',function(){
$('#green-btn').removeClass("js--active");
$('#black-btn').removeClass("js--active");
$('#blue-btn').removeClass("js--active");
$('#grey-btn').addClass("js--active");
$('#red-btn').removeClass("js--active");
});
$('#red-btn').on('click',function(){
$('#green-btn').removeClass("js--active");
$('#black-btn').removeClass("js--active");
$('#blue-btn').removeClass("js--active");
$('#grey-btn').removeClass("js--active");
$('#red-btn').addClass("js--active");
});
});
Image hover is not working in the below code. Whenever I try to hover on a particular image that particular image is not being displayed. But if I remove the second portion (In comments in code) from code then it's working perfectly.
<div class="container marginbot-50">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="wow flipInY" data-wow-offset="0" data-wow-delay="0.4s">
<div class="section-heading text-center">
<h2 class="h-bold" style="margin-top:90px">1. Meadows Towers</h2>
<div class="divider-header"></div>
<p style="text-align:justify">It is a major construction firm.
</p>
</div>
</div>
</div>
</div>
<div class="gallery" align="center"><br>
<h4>Check details about project below</h4>
<div class="thumbnails">
<img onmouseover="preview.src=img1.src" name="img1" src="img/works/1.jpg" alt="" />
<img onmouseover="preview.src=img2.src" name="img2" src="img/works/2.jpg" alt="" />
<img onmouseover="preview.src=img3.src" name="img3" src="img/works/3.jpg" alt="" />
<img onmouseover="preview.src=img4.src" name="img4" src="img/works/4.jpg" alt="" />
<img onmouseover="preview.src=img5.src" name="img5" src="img/works/5.jpg" alt="" />
</div>
<div class="preview" align="center">
<img name="preview" src="img/works/1.jpg" alt=""/>
</div>
<!--*****************Second portion*******************-->
<div class="wow flipInY" data-wow-offset="0" data-wow-delay="0.4s">
<div class="section-heading text-center">
<h2 class="h-bold" style="margin-top:90px">2.Shangrilla</h2>
<div class="divider-header"></div>
<p style="text-align:justify"> Construction is a major construction firm.
Our goal is to reach all the section of people from 2BHK, 3BHK and 4BHK.
</p>
</div>
</div>
</div>
</div>
<div class="gallery" align="center"><br>
<h4>Check details about project below</h4>
<div class="thumbnails">
<img onmouseover="preview.src=img1.src" name="img1" src="img/works/1.jpg" alt="" />
<img onmouseover="preview.src=img2.src" name="img2" src="img/works/2.jpg" alt="" />
<img onmouseover="preview.src=img3.src" name="img3" src="img/works/3.jpg" alt="" />
<img onmouseover="preview.src=img4.src" name="img4" src="img/works/4.jpg" alt="" />
<img onmouseover="preview.src=img5.src" name="img5" src="img/works/5.jpg" alt="" />
</div>
<div class="preview" align="center">
<img name="preview" src="img/works/1.jpg" alt=""/>
</div>
</body>
Have this function which accepts target and source and changes to required target's src
function changeSrc(control,target)
{
var targets=target.children[0]; //get its children
targets.setAttribute('src',control.getAttribute('src'));//change its src
}
Your updated HTML
Instead of onmouseover="preview.src=img1.src" call function onmouseover as onmouseover="javascript:changeSrc(this,this.parentElement.nextElementSibling)"
DEMO HERE
The problem with your previous code was, there were 2 elements with same name preview and when you said preview.src it fetched list of elements and wasn't able to assign it to proper preview - element.
How can I check each div.item to see if it does not contain span.premium and then add a new span (let's call that span.free) to div.screenshot?
<div id="video1" class="item">
<div class="screenshot">
<img src="image1.png" />
</div>
<h3>I am Video 1</h3>
</div>
<div id="video2" class="item">
<div class="screenshot">
<img src="image2.png" />
</div>
<h3>I am Video 2 <span class="premium">P</span></h3>
</div>
<div id="video3" class="item">
<div class="screenshot">
<img src="image3.png" />
</div>
<h3>I am Video 3</h3>
</div>
With one line of code:
$('div.item:not(:has(span.premium))').find('.screenshot').append('<span class="free">NEW SPAN</span>');
DEMO: https://jsfiddle.net/wxL2ujf8/
You can use :has(), :not(), and each() like
$('div.item:not(:has(span.premium))').each(function(){
$('div.screenshot').append('<span class="free"></span>')
});
If I have this:
<div>
<img u="image" src="../img/photography/002.jpg" />
<div u="thumb">
<img class="i" src="../img/photography/thumb-002.jpg"/>
</div>
<div u="caption" t="L">My Title</div>
<div u="caption" t="R">Link
</div>
</div>
I know that I will have an external link to http://mylink.com in the caption but I dont want that. I want an external link on the thumbnail. How do I acomplish that?
Am I wrong to think that I must add something to the u=prototype div?
Please try the following code,
<div>
<img u="image" src="../img/photography/002.jpg" />
<div u="thumb">
<img class="i" src="../img/photography/thumb-002.jpg"/>
</div>
<div u="caption" t="L">My Title</div>
</div>
</div>
I am trying to build an image grid with Isotope where a "Load More"-Button is positioned within that grid, at the end after all elements.
Placing the button was not a problem, and the insert of new elements neither, however I have strictly no idea how I can ensure that button always stays after the elements. In my current code, if the "Load More" button is clicked and more elements are inserted after the button.
Any idea how I could change that? Here what I've got some far: http://goo.gl/JbXkzC
Thanks!
First, your button can't be an isotope item if you don't want it part of the isotope layout so it is incorporated into the layout. You could use isotope's stamp option but the easiest way is to move it out of the col-xs-12 and into the row-fluid and change your button css slightly:
codepen
html:
<div class="container">
<div class="row">
<h1>Isotope Image Grid</h1>
<!--<button class="" id="button">Load More</button>-->
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="col-xs-12">
<div class="item">
<img src="" alt="" />
</div>
<div class="item">
<img src="" alt="" />
</div>
<div class="item">
<img src="" alt="" />
</div>
<div class="item">
<img src="" alt="" />
</div>
<div class="item">
<img src="" alt="" />
</div>
<div class="item">
<img src="" alt="" />
</div>
<div class="item">
<img src="" alt="" />
</div>
<div class="item">
<img src="" alt="" />
</div>
<div class="item">
<img src="" alt="" />
</div>
</div><button id="button">Load More</button>
</div>
</div>
css:
#button {
display:inline-block;
width: 25%;
height: 180px;
color: #fff;
font-size: 18px;
background-color: #C0392B;
border: 0px;
}
Looks like the only solution to this is to remove the "Load More" button and re-add it once the new elements have been appended.
$('#portfolioGrid').on("click", ".loadMore", function(addIsotopeItems){
addIsotopeItems.preventDefault();
var OElem = document.getElementById("button");
OElem.parentNode.removeChild(OElem);
var di="<div class=\'item item-new\'><img src=\'\'></img></div><button class=\'item loadMore\' id=\'button\'>Load More</button>";
newItems = $(di).appendTo('#portfolioGrid');
$("#portfolioGrid").isotope('insert', newItems );
});
Full code here on CodePen.