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>
Related
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.
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 prepared a DEMO to show you some interesting thing. This demo contains basic blueimp gallery setup example, nav bar and button.
<div class="nav">nav</div>
<div class="wrapper">
<div id="links">
<a href="images/banana.jpg" title="Banana">
<img src="images/thumbnails/banana.jpg" class="image" alt="Banana">
</a>
<a href="images/apple.jpg" title="Apple">
<img src="images/thumbnails/apple.jpg" class="image" alt="Apple">
</a>
<a href="images/orange.jpg" title="Orange">
<img src="images/thumbnails/orange.jpg" class="image" alt="Orange">
</a>
</div>
<div id="blueimp-gallery" class="blueimp-gallery">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div>
</div>
<button type="button" class="button">Click Me</button>
When user click image, it opens and occupies the full screen, but if.wrapper has a relative position, image won't be occupies full screen, because nav bar will overlap the image.
Try it yourself.
Open demo.
Click image.
Close image.
Click button.
Click image.
After that you will see, nav bar will overlap the image.
How to fix that problem?
When You are making div relative, You are also adding z-index: 1 to it - and You navbar has z-index: 10 already, so that's the main cause of such behavior.
Try adding z-index greater than 10 to relative div in Your stylesheet:
&_relative {
position: relative;
z-index: 11;
}
I'm using fancybox and to display my gallery i call all images like that
<a class="fancyboxgallerybook1" data-fancybox-group="book1" href="http://www.domaine.com/wp-content/uploads/books/1-latest/1.jpg" title="">
<img class="fancyboxthumbnailsgallerybook1" src="http://www.domaine.com/wp-content/uploads/books/1-latest/01.jpg" alt=""/>
</a>
<a class="fancyboxgallerybook1" data-fancybox-group="book1" href="http://www.domaine.com/wp-content/uploads/books/1-latest/2.jpg" title="">
<img class="fancyboxthumbnailsgallerybook1" src="http://www.domaine.com/wp-content/uploads/books/1-latest/02.jpg" alt=""/>
</a>
...
Can I use javascript, jquery, php ... in my page to call images present in my folder in ascending order, I mean: 1.jpg, 1.1.jpg, 2.jpg, 3.jpg, 4.1.jpg, 4.2.jpg, ... automatically without to set the numbers in each links like that
<a class="fancyboxgallerybook1" data-fancybox-group="book1" href="http://www.domaine.com/wp-content/uploads/books/1-latest/" title="">
<img class="fancyboxthumbnailsgallerybook1" src="http://www.domaine.com/wp-content/uploads/books/1-latest/" alt=""/>
</a>
<a class="fancyboxgallerybook1" data-fancybox-group="book1" href="http://www.domaine.com/wp-content/uploads/books/1-latest/" title="">
<img class="fancyboxthumbnailsgallerybook1" src="http://www.domaine.com/wp-content/uploads/books/1-latest/" alt=""/>
</a>
...
UPDATE QUESTION
Can I generate my gallery directly with PHP without changing my structur ?
I have made on the basis of the script BxSlider slider on its website.
Structure slider is as such:
<ul class="slider-cont">
<li>
<img src="images/slide-1.jpg" alt="">
<div class="caption">caption1.</div>
</li>
<li>
<img src="images/slide-2.jpg" alt="">
<div class="caption">caption2</div>
</li>
<li>
<img src="images/slide-3.jpg" alt="">
<div class="caption">caption3</div>
</li>
</ul>
Caption is over the image and is the way to the left of the slider. My question is whether it is possible using CSS3 or JS to do the same animation to make the text more quickly, "rolling off" and "rode" than the picture? I tried using the tool in the bxslider. OnSlideBefore or OnSlideAfter but I managed to get this effect.