I am using carousel with lazy loading ,so that images load only on scroll,
But problem is that all images except images inside carousel are not loading.
I have also tried this solution.
Carousel
<div class="owl-carousel">
<div class="item">
<img src="/_/img/Descriptive-Essay.jpg" class="lazy" alt="Descriptive Essay">
<h4>Descriptive Essay</h4>
<p>Our experienced descriptive essay writers paint a beautiful picture through words and give you an amazing descriptive essay.</p>
</div>
<div class="item">
<img src="/_/img/Persuasive-Essay.jpg" class="lazy" alt="Persuasive Essay">
<h4>Persuasive Essay</h4>
<p>Our persuasive essay writers are brilliant at convincing the reader and keeping them engaged in the essay from start to finish.</p>
</div>
<div class="item">
<img src="/_/img/Expository-Essay.jpg" class="lazy" alt="Expository Essay">
<h4>Expository Essay</h4>
<p>Our expository essay writing service delivers a perfect expository essay complete with definitions, facts, examples and stats.</p>
</div>
<div class="item">
<img src="/_/img/Narrative-Essay.jpg" class="lazy" alt="Narrative Essay">
<h4>Narrative Essay</h4>
<p>Our narrative essay writers are master in the art of story-telling and making your essays engaging so you can get the best grade.</p>
</div>
</div>
Script
<script>
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
responsiveClass:true,
autoplay:true,
autoplayTimeout:2000,
rewindSpeed : 1000,
responsive:{
0:{
items:1,
nav:true
},
600:{
items:2,
nav:false
},
1000:{
items:3,
nav:true,
}
}
})
</script>
Lazy Loading
<script>
$(function() {
$('.lazy').lazy({
beforeLoad: function(element){
console.log('image "' +element.data('src')+ '" is about to be loaded');
},
afterLoad: function(element) {
console.log('image "' +element.data('src') + '" was loaded successfully');
},
onError: function(element) {
console.log('error');
},
onFinishedAll: function() {
console.log('lazy instance is about to be destroyed')
}
});
});
</script>
Please help what i am doing wrong,I have also tried changing order of script but no luck.My site is live here
Add this to owl item
.owl-item {
display: inline-block;
}
One more Issue :
I assume that the content outside the div should be hidden
.owl-carousel{
overflow:hidden;
}
Its just a minor issue. Please add below code for the .owl-item.
.owl-item {
display: inline-block;
}
Related
For context, this is just a website that displays a thumbnail gallery linking to larger photos/videos.
When the thumbnails of photos are opened there is no problem. The thumbnails with a video attached to them look identical to the photo thumbnail only until the video thumbnail is clicked and the video will not load. Reference the HTML(first block) & javascript(second block) code below, any help would be greatly appreciated, this is my own personal project and I have been stuck for a couple days lol. if there any other information required, please do not hesitate to ask
This what happens when the thumbnail with the video is clicked but the video DOES NOT PLAY :(
<!-- code below is the PHOTO block of code ! -->
<article class="thumb">
<a href="images/fulls/21.jpg" class="image">
<img src="images/thumbs/21.jpg" class="image" alt="" /></a>
<h2> Cmon mayne</h2>
<p>Photoshoot with Myles Jay </p>
</article>
<!-- code below is the VIDEO block of code ! -->
<article class="thumb">
<a href="images/fulls/16.mp4" type="video/mp4" video
src="images/fulls/16.mp4" class="image">
<img src="images/thumbs/ab22.jpg" class="image" alt="" />
</a> <h2> Getting to the work</h2>
<p>Photoshoot with Myself </p>
</article>
// Main.
var $main = $('#main');
// Thumbs.
$main.children('.thumb').each(function() {
var $this = $(this),
$image = $this.find('.image'), $image_img = $image.children('img'),
x;
// No image? Bail.
if ($image.length == 0)
return;
// Image.
// This sets the background of the "image" <span> to the image pointed to by its child
// <img> (which is then hidden). Gives us way more flexibility.
// Set background.
$image.css('background-image', 'url(' + $image_img.attr('src') + ')');
// Set background position.
if (x = $image_img.data('position'))
$image.css('background-position', x);
// Hide original img.
$image_img.hide(); });
// Poptrox.
$main.poptrox({
baseZIndex: 20000,
caption: function($a) {
var s = '';
$a.nextAll().each(function() {
s += this.outerHTML;
});
return s;
},
fadeSpeed: 300,
onPopupClose: function() { $body.removeClass('modal-active'); },
onPopupOpen: function() { $body.addClass('modal-active'); },
overlayOpacity: 0,
popupCloserText: '',
popupHeight: 150,
popupLoaderText: '',
popupSpeed: 300,
popupWidth: 150,
selector: '.thumb > a.image',
usePopupCaption: true,
usePopupCloser: true,
usePopupDefaultStyling: false,
usePopupForceClose: true,
usePopupLoader: true,
usePopupNav: true,
windowMargin: 50
});
// Hack: Set margins to 0 when 'xsmall' activates.
breakpoints.on('<=xsmall', function() {
$main[0]._poptrox.windowMargin = 0;
});
breakpoints.on('>xsmall', function() {
$main[0]._poptrox.windowMargin = 50;
});
})(jQuery);
I have searched every stackoverflow method mentioning a thumbnail and video, I am honestly stuck. I have been playing around with the tags and attributes but I have seem to be getting no where.
Try setting up your <article> as:
<article class="thumb">
<a href="images/fulls/16.mp4">
<img src="images/thumbs/ab22.jpg" class="image" alt="" />
</a> <h2> Getting to the work</h2>
<p>Photoshoot with Myself </p>
</article>
I'm working on my new website design and decided to incorporate Vue.JS which I know very little about but am learning as I redesign my website.
I am using a Vue app to load different pages on my site.
I am also using it to load the image gallery, so I have all my images placed into an array in the app and they load just fine into the HTML.
I decided to use figures and want to place a caption beneath each image.
What I'm trying to do is place the figcaption text in the vue app, as part of the image array and have it load each text that belongs with each image.
this is the code i have for the html:
<div id="images" class="gallery content" v-if="gallery" v-for='img in imgs'>
<figure>
<img class="gallery-img" id="img.id" :src="img.url" :alt="img.alt" v-on:click="showModal">
<figcaption> a caption </figcaption>
</figure>
</div>
the "a caption" is just a place taker right now so i can see what it looks like on the site but i want that replaced with the actual caption which would be set in the vue app which is below.
js:
<script>
const test = Vue.createApp({
data(){
return{
home: true,
gallery: false,
store: false,
about: false,
imgs: [
{ url: 'images\\wood_gallery\\pens\\pen0.jpeg', id: 'pen0', alt: 'an image', caption: 'Pen kit: Skeleton key \n Wood: unknown' },
.... rest of the vue app code which is fine and works so not necessary to show.
Question: Can I do it this way and how do I access that 'caption' portion of text and put it into the html as text?
Simply use img.caption in the figure tag to display the caption content.
<figure>
<img class="gallery-img" id="img.id" :src="img.url" :alt="img.alt" v-on:click="showModal">
<figcaption>{{ img.caption }}</figcaption>
</figure>
I think this works fine.
<div id="images" class="gallery content" v-if="gallery" v-for='img in imgs'>
<figure>
<img class="gallery-img" id="img.id" :src="img.url" :alt="img.alt" v-on:click="showModal">
<figcaption v-html=“caption”></figcaption>
</figure>
</div>
const test = Vue.createApp({
data(){
return{
home: true,
gallery: false,
store: false,
about: false,
caption:"<h1>hi</h1>",
imgs: [
{ url: 'images\\wood_gallery\\pens\\pen0.jpeg', id: 'pen0', alt: 'an image', caption: 'Pen kit: Skeleton key \n Wood: unknown' },
I have on my club webpage a score tables where i want to change the text that indicates a club into the logo of this club. for example RHI,BRL,MAM has to become an logo image.
I can not figure out how to do this in CSSor javascript. Does anybody know the answer?
the code that generates the tables is:
<h2>Men's games</h2>
<div class="pb-dynamic" id="block-main-men">
<p><img src="//www.pointbench.com/pointbench/img/pb-loading-1.gif" /></p>
</div>
<h2>Women's games</h2>
<div class="pb-dynamic" id="block-main-women">
<p><img src="//www.pointbench.com/pointbench/img/pb-loading-1.gif" /></p>
</div>
<!-- Include JS script to do the job, block definition(s) and main function call --><script src="//stats.pointbench.com/pointbench/js/pb-update-ex.js" type="text/javascript"></script><script type="text/javascript">
<!--//--><![CDATA[// ><!--
blockdefs =
[
{
leagueid: 'bel/29/2021',
blocktype: 'team-games',
target: 'block-main-men',
teamid: '413'
},
{
leagueid: 'bel/30/2021',
blocktype: 'team-games',
target: 'block-main-women',
teamid: '207'
}
];
PBShowBlocks( blockdefs );
//--><!]]>
</script><!-- End --></div>
If I use the following CSS code (in this case a color but could also be a image)
td[class="team"] {
color: red;
}
The whole columns turns red. But I want that only the ones with 'RHI' in it turns red.
That I cannot figure out
We have implemented multiple ads on our site and it has been working fine since recently. We have not touched our line items but created a few new creatives which are currently displaying. However, since this change, we randomly end up with certain ads not showing at all causing blank spaces. We have not touched the initial code or ids. We have tried logging into user accounts and that seems to cause ads to load more often but we still sometimes sit with an empty space block.
I have tried to research this subject but cannot find a solution. I have tried the fixes stated by this site but it did not help.
I have also looked at this discussion where they stated the importance of having a user account, which seemed to help but we still sit with blank spaces instead of ads from time to time.
<div>
<script>
googletag.cmd.push(function() {
googletag.defineSlot('/191675786/bottom_mobile', [300, 250], 'div-gpt-ad-1470805011041-0').addService(googletag.pubads());
googletag.defineSlot('/191675786/top_mobile', [320, 50], 'div-gpt-ad-1470804718031-0').addService(googletag.pubads());
googletag.defineSlot('/191675786/bottom_widescreen', [728, 90], 'div-gpt-ad-1470804049204-0').addService(googletag.pubads());
googletag.defineSlot('/191675786/right_side_1', [300, 600], 'div-gpt-ad-1470775758148-0').addService(googletag.pubads());
googletag.defineSlot('/191675786/middle_mobile', [320, 50], 'div-gpt-ad-1490793232691-0').addService(googletag.pubads());
googletag.defineSlot('/191675786/right_side_2', [300, 250], 'div-gpt-ad-1470775758148-1').addService(googletag.pubads());
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});
</script>
</div>
<aside class='adverts'>
<div class='mobile-advert text-center'>
<!-- /191675786/top_mobile -->
<div id='div-gpt-ad-1470804718031-0' style='height:50px; width:320px;'>
<script>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1470804718031-0'); });
</script>
</div>
</div>
</aside>
<aside class="adverts padding-medium-top">
<div class="widescreen-advert">
<!-- /191675786/bottom_widescreen -->
<div id="div-gpt-ad-1470804049204-0" style="height:90px; width:728px;">
<script>
googletag.cmd.push(function() { googletag.display("div-gpt-ad-1470804049204-0"); });
</script>
</div>
</div>
</aside>
<section class='rightside-container col-sm-4 col-xs-12'>
<aside class='adverts'>
<div class='mobile-advert text-center'>
<!-- /191675786/bottom_mobile -->
<div id='div-gpt-ad-1470805011041-0' style='height:250px; width:300px;'>
<script>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1470805011041-0'); });
</script>
</div>
</div>
<div class='widescreen-advert'>
<!-- /191675786/right_side_1 -->
<div id='div-gpt-ad-1470775758148-0' style='height:600px; width:300px; margin-bottom: 20px;'>
<script>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1470775758148-0'); });
</script>
</div>
<!-- /191675786/right_side_2 -->
<div id='div-gpt-ad-1470775758148-1' style='height:250px; width:300px;'>
<script>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1470775758148-1'); });
</script>
</div>
</div>
</aside>
</section>
We have not found any solution as of yet and we do not understand why it only show ads sometimes but not always. Correct me if I am wrong but if the code was incorrect, wouldn't that mean that no ads would show ever?
I've been working on my carousel and it seems to be working now.
It start cycling, but not before I've hovored my cursor once over it. How do I make it start cycle automaticly, so people doesn't have to hover the carousel.
Heres my code:
<div id="slider" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="img/slide1.jpg" id="picture">
<div class="carousel-caption">
<center><h4>ADD TEXT LATER</h4>
<p>ADD TEXT LATER</p></center>
</div>
</div>
<div class="item">
<img src="img/slide2.jpg" id="picture">
<div class="carousel-caption">
<center><h4>ADD TEXT LATER</h4>
<p>ADD TEXT LATER</p></center>
</div>
</div>
<div class="item">
<img src="img/slide3.png" id="picture">
<div class="carousel-caption">
<center><h4>ADD TEXT LATER</h4>
<p>ADD TEXT LATER</p></center>
</div>
</div>
<div class="item">
<img src="img/slide4.png" id="picture">
<div class="carousel-caption">
<center><h4>ADD TEXT LATER</h4>
<p>ADD TEXT LATER</p></center>
</div>
</div>
</div>
<a class="carousel-control left"href="#slider" data-slide="prev">‹</a>
<a class="carousel-control right"href="#slider" data-slide="next">›</a>
</div>
<script>
$('.carousel').carousel({
interval: 1000
})
</script>
<script src="js/bootstrap-carousel.jss"></script>
Other than adding placeholder images, I took your exact HTML and it seems to work correctly for me # http://www.bootply.com/66558 .
Perhaps you could double-check everything is good with your CSS and JS files, or alternatively try using CDN versions for troubleshooting
Good luck!
EDIT
If the above still doesn't work for you, try initialising with
$(document).ready(function () {
$('.carousel').carousel({
interval: 1000
});
$('.carousel').carousel('cycle');
});
See live: http://www.bootply.com/66559
It seems to work with the "cycle" but how do I change the interval then? It goes so quickly if I add the cycle.
EDIT
Never mind, I just took the interval from 1000 to 10000, now it seems to work perfectly. THANKS YOU SIR!
Still havent helped me, nor browsing git hub discussions.
Everybody seemed not to see the real problem that the carousel is really pausing when the mouse is on the container....so I had to read through the .carousel docs
and its really there... pause atribute have to be set on null or its on default set to "hover" which will pause it ...
so for me add this is the resolution:
add the interval, set pause on null, and then manually call the carousel
<script>
$(document).ready(function () {
$('.carousel').carousel({
interval: 3100,
pause:null
});
$('.carousel').carousel('cycle');
});
</script>
I had to add delay for carousel starting function. For some reason it did not start after routing to another page view.
This is what did the trick for me:
<script>
setTimeout(function() {
$('.carousel').carousel();
}, 3000);
</script>