Issue
I am making a website in php ,and in its home page i have a video at the top and a carousel below it . But every time when it loads the carousel loads first and then top video loads . I want to apply the lazy load on carousel, which is an html division . Now how can i ensure the sequential loading of content.
CODE FOR TOP VIDEO BELOW HEADER IS :-
#extends('front.layouts.main')
#section('content')
<div class="clearfix"></div>
<!-- <script src="<?php echo url('/'); ?>/js/particles.js/particles.js"></script> -->
<div class="tp-banner-container two">
<div class="tp-banner3">
<ul>
<li data-transition="fade" data-slotamount="1" data-masterspeed="500"
data-thumb="http://placehold.it/180x110" data-delay="13000" data-
saveperformance="on"
data-title="Slide 1">
<video playsinline loop muted autoplay class="fullscreen-bg__video">
<source src="/videos/HomePage/Jet_new.mp4" type="video/mp4">
</video>
</li>
</ul>
<!-- <div class="tp-bannertimer"></div> -->
</div>
</div>
CODE FOR CAROUSEL BELOW VIDEO IS :-
<div class="containerRevolvingBig" >
<div class="carousel" >
<a target="_blank" href="/accessControlPage" loading="lazy">
<div id="image1" class="carousel__face"><span class="spanRevolving">Access Control</span></div>
</a>
<a target="_blank" href="/perimeterSurveillancePage">
<div id="image2" class="carousel__face"><span class="spanRevolving">Perimeter Surveillance</span></div>
</a>
<a target="_blank" href="/antiDronePage">
<div id="image3" class="carousel__face"><span class="spanRevolving">Anti-Drone</span></div>
</a>
<a target="_blank" href="/peopleVehicleMonitoringPage">
<div id="image4" class="carousel__face"><span class="spanRevolving">People & Vehicle Monitoring</span></div>
</a>
<div id="image5" class="carousel__face"><span class="spanRevolving">APPLICATIONS</span></div>
<a target="_blank" href="/borderSurveillancePage">
<div id="image6" class="carousel__face"><span class="spanRevolving">Border Surveillance</span></div>
</a>
<a target="_blank" href="/spaceAerialSurveillancePage">
<div id="image7" class="carousel__face"><span class="spanRevolving">Space & Aerial Surveillance</span></div>
</a>
<a target="_blank" href="/weaponSightsPage">
<div id="image8" class="carousel__face"><span class="spanRevolving">Weapon Sights</span></div>
</a>
<a target="_blank" href="/vechileMountedPage">
<div id="image9" class="carousel__face"><span class="spanRevolving">Vehicle Mounted Surveillance</span>
</div>
</a>
</div>
</div>
Now I want that, this complete CAROUSEL div should load when the top video loads completely.How should I apply lazy load in this div.
I would suggest your page to have just the video loaded and add a listener to get to know when the video is loaded (Wait until an HTML5 video loads) . Then inside the listener generate the carrousel with javascript. (https://www.javascripttutorial.net/dom/manipulating/create-a-dom-element/). Finally if you are using a carrousel plugin this will need to be call once the carrousel html has been included into the page.
Other solution but i consider is not ideal, could be set creating a view in the backend that just includes the carousel, then in the frontend, inside the same listener described above, you:
send an ajax request to get that view,
in the front-end you will need to parse the html to extract the carrousel.
Inject the carrousel html into the page.
Initialise the carrousel
Hope this is clear.
Related
So I've been trying to figure out the best way to use both of these libraries together, but I've been having a hard time.
The best thing I've found is this CodePen (https://codepen.io/ezra_siton/pen/XNpJaX) but it seems incredibly overcomplicated and I personally haven't been able to get it to work on my own project. Especially the function;
var initPhotoSwipeFromDOM = function(gallerySelector) {
... omitted this because the function is huge. This is here because
SO doesn't allow codepen links without a code block for some dumb reason.
}
I'm also using VueJS, but I don't think that really makes a difference.
All I want to happen is say I have a carousel of 6 images (3 on each "page"). I want it so that if you click the 3rd image, in Photoswipe it also goes to the 3rd image, and if you then go to the 4th image inside the lightbox gallery, it also makes the carousel go to the next page as well in the background if that makes sense.
I ideally want to do this all in native/es6 JS and I want to avoid dependencies like JQuery.
The codepen you provided is exactly how this needs to be done and it is explained well there. The function you mentioned is actually the basic setup from the photoswipe getting started page with one modification to make the swiper index match upon closing photoswipe:
/* EXTRA CODE (NOT FROM THE CORE) - UPDATE SWIPER POSITION TO THE CURRENT ZOOM_IN IMAGE (BETTER UI) */
// photoswipe event: Gallery unbinds events
// (triggers before closing animation)
gallery.listen("unbindEvents", function() {
// This is index of current photoswipe slide
var getCurrentIndex = gallery.getCurrentIndex();
// Update position of the slider
mySwiper.slideTo(getCurrentIndex, false);
});
Other than that part there isn't anything there that is out of the norm for setting up swiper and photoswipe independently. Just follow the normal instructions for each script, and make sure to structure the html correctly like done in the pen because that is what allows them to function together:
<!-- Slider main container -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<ul class="swiper-wrapper my-gallery" itemscope itemtype="http://schema.org/ImageGallery">
<!-- Slides -->
<li class="swiper-slide" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a title="click to zoom-in" href="https://picsum.photos/1200/602" itemprop="contentUrl" data-size="1200x600">
<img src="https://picsum.photos/1200/602" itemprop="thumbnail" alt="Image description" />
</a>
</li>
<li class="swiper-slide" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a title="click to zoom-in" href="http://placehold.it/1200x600/AB47BC/ffffff?text=Zoom-image-2" itemprop="contentUrl" data-size="1200x600">
<img src="http://placehold.it/600x300/AB47BC/ffffff?text=Thumbnail-image-2" itemprop="thumbnail" alt="Image description" />
</a>
</li>
<li class="swiper-slide" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a title="click to zoom-in" href="http://placehold.it/1200x600/EF5350/ffffff?text=Zoom-image-3" itemprop="contentUrl" data-size="1200x600">
<img src="http://placehold.it/600x300/EF5350/ffffff?text=Thumbnail-image-3" itemprop="thumbnail" alt="Image description" />
</a>
</li>
<li class="swiper-slide" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a title="click to zoom-in" href="http://placehold.it/1200x600/1976D2/ffffff?text=Zoom-image-4" itemprop="contentUrl" data-size="1200x600">
<img src="http://placehold.it/600x300/1976D2/ffffff?text=Thumbnail-image-4" itemprop="thumbnail" alt="Image description" />
</a>
</li>
<li class="swiper-slide" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a title="click to zoom-in" href="https://picsum.photos/1200/603" itemprop="contentUrl" data-size="1200x600">
<img src="https://picsum.photos/1200/603" itemprop="thumbnail" alt="Image description" />
</a>
</li>
</ul>
Using photoswipe, I want to be able to launch multiple galleries on a same page, without any thumbnails.
Based on this demo http://codepen.io/dimsemenov/pen/ZYbPJM , galleries are launched from a clic on a thumbnail.
I don't want to display any thumbnails on the page, but I want to be able to trigger the selected gallery from a link (class="trigger-link') based on the markup in the snippet below.
How do I bind opening selected gallery on a link instead of the thumbnail, based on the codepen demo?
<article class="gallery">
<a class="trigger-link" href="">
<h1>Gallery 1</h1>
</a>
<div class="gallery__items">
<figure>
<img src="https://source.unsplash.com/random" data-size="1200x800">
</figure>
<figure>
<img src="https://source.unsplash.com/category/nature/weekly" data-size="1200x800">
</figure>
</div>
</article>
<article class="gallery">
<a class="trigger-link" href="">
<h1>Gallery 2</h1>
</a>
<div class="gallery__items">
<figure>
<img src="https://source.unsplash.com/dategory/city/daily" data-size="1200x800">
</figure>
<figure>
<img src="https://source.unsplash.com/category/nature/daily" data-size="1200x800">
</figure>
</div>
</article>
I am facing some problem what i have now is there are images render in a div and and there anchor tag inside div when user clicks on image
an overlay screen will open where i have to display pdf files i have used TouchPdf plugin now what i want is there will be arrows buttons on overlay screen which will navigate to next pdf file and displayed on overlay screen.I am getting difficulty in achieveing this Thanks All
this how images are rendered
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<div class="image-div-conents">
<h3 class="circle">BI</h3>
<div class="doc-name-date">
<!-- <ul class="list-inline"> -->
<span class="bill">Bill</span>
<span class="bill">2-02-2017</span>
<!-- </ul> -->
</div>
</div>
<a href="#">
<img height="300px" class="img-responsive" src="http://i156.photobucket.com/albums/t20/warjhenz/1000x1000.gif" alt="">
<div class="validitity"><span>Validitity: Forever</span></div>
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<div class="image-div-conents">
<h3 class="circle">BI</h3>
<div class="doc-name-date">
<!-- <ul class="list-inline"> -->
<span class="bill">Bill</span>
<span class="bill">2-02-2017</span>
<!-- </ul> -->
</div>
</div>
<a href="#">
<img height="300px" class="img-responsive" src="http://i156.photobucket.com/albums/t20/warjhenz/1000x1000.gif" alt="">
<div class="validitity"><span>Validitity: Forever</span></div>
</a>
</div>
this will continue and images are rendered horizontally
What i have tried is--
Add click event
$('.thumb a').on('click',function(){
alert($(this).attr('href'));
alert($(this).index());
});
but index is always 1 for each href as there are seprate div's and there is only anchor tag inside it.
You need to create a topmost parent element which has all the divs
You can create a div
<div class="parent> all your divs etc </div>
$('.thumb a').on('click',function(){
alert($(this).parentsUntil("thumb").index()); //Here the index will be the clicked index.
});
The problem is you are using
The problem is that tha click event is on a tag and # takes to top of the page.You should always use javascript:void(0).
I am working on a bootstrap with node.js express project. Upon getting variables installed into the theme where the username is (as shown below), There is some sort of invisible gap in the viewing of the code.
<!-- User Account: style can be found in dropdown.less -->
<li class="dropdown user user-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<img id='picture2' src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image">
<span id="name" class="hidden-xs">Firstname Lastname</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header">
<img id='picture' src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
<p><div id="name2">Firstname Lastname</div>
<div id="companytitle"><small>Member</div>since<div id='signupdate'>Nov. 2012</small></div>
</p>
</li>
<!-- Menu Body -->
This image shows the original bootstrap before i added the multiple tags to change the text with ajax. As soon as i added the <div> tags, the visuals of the profile tab parted and started to look like the first image.
I am unsure of how exactly to get these items to align right on the page, as you can see, it almost appears that the data has some breaks in it.
Can anyone point me in the right direction to fix this?
Here is the original boostrap snipped for the profile tab
<!-- User Account: style can be found in dropdown.less -->
<li class="dropdown user user-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<img src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image">
<span class="hidden-xs">Alexander Pierce</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header">
<img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
<p>
Alexander Pierce - Web Developer
<small>Member since Nov. 2012</small>
</p>
</li>
<!-- Menu Body -->
I have my angular directive, and that is some div's with around it an but when I click on the div it doesn't reload my page.
Am I doing something wrong?
This is the full directive
<div class="col s12 m6 l4">
<div class="video-card">
<a href="#/videos/detail/{{video.Id}}" target="_self">
<div class="card-image">
<img ng-src="{{video.ThumbnailUrl?video.ThumbnailUrl:'img/images.png'}}" src="" />
</div>
</a>
<a href="#/videos/detail/{{video.Id}}" target="_self">
<div class="card-content">
<div class="card-title-box">
<a href="#/videos/detail/{{video.Id}}">
<span class="card-title grey-text text-darken-4">
{{video.Title}}
</span>
</a>
</div>
<div class="card-action">
<div class="more-info">
<span class="group grey-text">
{{ video.Author}}
</span>
<a href="#/groups/detail/{{playlist.Id}}/List/{{video.Id}}" ng-if="playlist">
<i class="mdi-av-play-arrow right tooltipped black-text small "
data-position="top" data-delay="0" data-tooltip="{{'video.playFromhere' | translate}}"></i>
</a>
</div>
</div>
</div>
</a>
</div>
</div>
I need to reload the page due to a bug in a plugin I'm using on the detail page, and nor the author of that plugin nor I can figure out what is happening, and the only way to get it work is to reload the page when going to a video.
You can reload a page in Javascript using window.location.reload()
Target only sets which frame the link should act on. So if you want the document to reload use
window.location.reload();