I'm using ChillBoxs Jquery plugin with more images on my website but when window is ready I want one of that all images load as pop up images without any clicking from visitor.
Issue I can't call one of those images for the first pop up when window has already load.
Here is my JS ChillBoxs
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/chillbox-packed.js"></script>
<script type="text/javascript">
$(function(){
$('[rel$=ChillBox]').ChillBox();
});
</script>
</head>
<body>
And here is images
<a href="images/a1.jpg" rel="ChillBox" >
<img src="images/a1.jpg" />
</a>
<a href="images/a2.jpg" rel="ChillBox" >
<img src="images/a2.jpg" />
</a>
<a href="images/a3.jpg" rel="ChillBox" >
<img src="images/a3.jpg" />
</a>
<a href="images/a4.jpg" rel="ChillBox" >
<img src="images/a4.jpg" />
</a>
<a href="images/a5.jpg" rel="ChillBox" >
<img src="images/a5.jpg" />
</a>
try adding a simple click trigger:
$(function(){
var $chill = $('[rel$=ChillBox]')
$chill.ChillBox();
$chill.first().click();
});
Related
The document ready function isn't working for me, but it worked just the day before. Also, no other jQuery function works in that file but it did a couple of days ago. can somebody help?
here is the code:
$(document).ready(function() {
//does not log ready
console.log('ready');
//animation for slides
$("#slideshow > div:gt(0)").hide();
//this does work
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 4000);
//end of animation
$('nav ul div').hover(function() {
$('.aMain').addClass('expand');
}, function() {
$('.aMain').removeClass('expand');
});
$('#a').hover(function() {
$('.aMain').addClass('expand');
}, function() {
$('.aMain').removeClass('expand');
});
//this doesnt log click inside the function
$('.subA', '.aNav').click(function() {
console.log('click');
console.log($(this).get(0).id);
//sessionStorage.setItem("catagory", $(this).get(0).id); -> commented to not throw error on SO
});
//$('#thead').text(sessionStorage.getItem("catagory")); -> commented to not throw error on SO
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Alpert Cooks - Cook and Share</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
</head>
<body>
<header>
<img src="images/Logo.png" id="logo" alt="" href="AlpertCooks/index.html" />
<nav id="nav">
<ul>
<li><a class="anav" href="recipeList.php">מנות ראשונות</a></li>
<li><a id="a" class="anav">מנות עיקריות</a></li>
<li><a id="vegeterian" class="anav" href="recipeList.php">צמחוני</a></li>
<li><a id="salads" class="anav" href="recipeList.php">סלטים</a></li>
<li><a id="deserts" class="anav" href="recipeList.php">קינוחים</a></li>
<li><a id="speciala" href="recipeUpload.php">העלו מתכון שלכם</a></li>
<div class="aMain">
<li><a id="meat" href="recipeList.php" class="subA">בשר</a></li>
<li><a id="bread" href="recipeList.php" class="subA">פחמימות</a></li>
<li><a id="fish" href="recipeList.php" class="subA">דגים</a></li>
<li><a id="milk" href="recipeList.php" class="subA">דברי חלב</a></li>
<li><a class="subA">אחר</a></li>
</div>
</ul>
</nav>
</header>
<main id="main">
<div id="slideshow">
<div>
<div class="title">
<h2 class="h2">פסטה</h2>
<img id="line" src="images/decorative-clipart-fancy-3.png" alt="" /></div>
<img id="slides" src="images/d87c1237-c3e2-401a-b26b-9afc323e503f.jpg" alt="" />
</div>
<div>
<div class="title">
<h2 class="h2">פירה</h2>
<img id="line" src="images/decorative-clipart-fancy-3.png" alt="" /></div>
<img id="slides" src="images/ab7c95c8-781c-4d09-93f2-d484a95cde2d.jpg" alt="" />
</div>
</div>
</main>
<footer>
</footer>
</body>
</html>
I added comments inside the code so you can see which functions are working and which ones are not. All the hover functions are working.
As the JS snippet runs normally, assuming no network problems, Google CDN's delivery of the jQuery script will is also assumed to happen normally.
The issue can be pinpointed to the part where the JS file is imported to the HTML file, which is:
<script type="text/javascript" src="js/scripts.js"></script>
You will want to check your browser's devtools/inspector's Network tab to see if you are getting a 404 response/error for fetching this script. If so, the problem has been correctly identified, which is that the javascript file is not available at the location js/scripts.js. Verify the location/address of the javascript file to ensure that the scripted is imported correctly to the HTML file.
I have 3 gallery column which is "Gallary 1", "Gallary 2", "Gallary 3". Each gallery has more than 5 images collection.
Now, What I am doing is, When the user clicked on gallery 1 then it should be displayed only gallery one image, When the user clicked on gallery 2 then it should be displayed only gallery two images and so on.
I checked on google for the plugin but I haven't found.
Now, I am using http://sachinchoolur.github.io/lightGallery/ plugin
$(document).ready(function() {
$('.lightgallery').lightGallery({
thumbnail: false
});
});
.lightgallery a img{width: 300px;}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.11/css/lightgallery.css">
<div class="lightgallery">
<a href="http://scbb.ihbt.res.in/SCBB_dept/video_tutorial/vd/examples/images/Swan_large.jpg">
<img src="http://scbb.ihbt.res.in/SCBB_dept/video_tutorial/vd/examples/images/Swan_large.jpg" />
</a>
<a href="https://www.esa.int/var/esa/storage/images/esa_multimedia/images/2017/11/autumn_fireball/17255671-1-eng-GB/Autumn_fireball_node_full_image_2.jpg">
<img src="https://www.esa.int/var/esa/storage/images/esa_multimedia/images/2017/11/autumn_fireball/17255671-1-eng-GB/Autumn_fireball_node_full_image_2.jpg" />
</a>
<a href="https://wallpaperbrowse.com/media/images/fall-autumn-red-season_WV7Vb7u.jpg">
<img src="https://wallpaperbrowse.com/media/images/fall-autumn-red-season_WV7Vb7u.jpg" />
</a>
<a href="https://wallpaperbrowse.com/media/images/cat-1285634_960_720.png">
<img src="https://wallpaperbrowse.com/media/images/cat-1285634_960_720.png" />
</a>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.11/js/lightgallery-all.min.js"></script>
Above snippet is working for a single gallery section because it's displaying all the images.
Any other plugin is available for my issues?
I tried some my thought that I will created like below code and using css
.lightgallery a{position: absolute;} all the anchor tag images will display over the first image but this is not the right way. right?
<div class="lightgallery"><!--gallary one images--></div>
<div class="lightgallery"><!--gallary two images--></div>
<div class="lightgallery"><!--gallary three images--></div>
Loop each lightgallery div and create the gallery
$(document).ready(function() {
$('.lightgallery').each(function(i, v) {
$(v).lightGallery({
thumbnail: false
});
});
});
.lightgallery a img {
width: 300px;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.11/css/lightgallery.css">
<div class="lightgallery">
<a href="http://scbb.ihbt.res.in/SCBB_dept/video_tutorial/vd/examples/images/Swan_large.jpg">
<img src="http://scbb.ihbt.res.in/SCBB_dept/video_tutorial/vd/examples/images/Swan_large.jpg" />
</a>
<a style="display:none;" href="https://www.esa.int/var/esa/storage/images/esa_multimedia/images/2017/11/autumn_fireball/17255671-1-eng-GB/Autumn_fireball_node_full_image_2.jpg">
<img src="https://www.esa.int/var/esa/storage/images/esa_multimedia/images/2017/11/autumn_fireball/17255671-1-eng-GB/Autumn_fireball_node_full_image_2.jpg" />
</a>
</div>
<div class="lightgallery">
<a href="https://wallpaperbrowse.com/media/images/fall-autumn-red-season_WV7Vb7u.jpg">
<img src="https://wallpaperbrowse.com/media/images/fall-autumn-red-season_WV7Vb7u.jpg" />
</a>
</div>
<div class="lightgallery">
<a href="https://wallpaperbrowse.com/media/images/cat-1285634_960_720.png">
<img src="https://wallpaperbrowse.com/media/images/cat-1285634_960_720.png" />
</a>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.11/js/lightgallery-all.min.js"></script>
I want to replace all links which are inside a specific DIV using JavaScript.
For example
<div class="div01">
<div class="div02">
<a href="www.oldlink.com">
<img src="myimage.jpg" class="imageclass">
</a>
</div>
<a class="link02" href="www.oldlink2.com">
<div class="div03">
<h5>My Heading</h5>
</div>
</a>
Now I want to replace www.oldlink.com and www.oldlink2.com with my one new link like www.mynewlink.com. Actually I am using WordPress and do not want to edit it using PHP. I am using a plugin Header and Footer Script to do this.
https://wordpress.org/plugins/header-and-footer-scripts/
Try this:
const div1 = document.querySelector('.tg-one-fourth');
div1.querySelectorAll('a').forEach(a => a.href = '//www.mynewlink.com');
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="tg-one-fourth">
<div class="div02">
<a href="www.oldlink.com">
<img src="myimage.jpg" class="imageclass">
</a>
</div>
<a class="link02" href="www.oldlink2.com">
<div class="div03">
<h5>My Heading</h5>
</div>
</a>
</div>
</body>
</html>
I created a dynamically load page using iframe. When it load, it show empty space in the body area until i click page links. How to add default page when i frame load.
<html>
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".divlink").click(function(){
$("#content").attr("src" , $(this).attr("ref"));
});
});
</script>
</head>
<body>
<iframe id="content"></iframe>
<a href="#" ref="page1.html" class="divlink" >Page 1</a><br />
<a href="#" ref="page2.html" class="divlink" >Page 2</a><br />
<a href="#" ref="page3.html" class="divlink" >Page 3</a><br />
<a href="#" ref="page4.html" class="divlink" >Page 4</a><br />
<a href="#" ref="page5.html" class="divlink" >Page 5</a><br />
<a href="#" ref="page6.html" class="divlink" >Page 6</a><br />
</body>
</html>
Please check below snippet. In this case it will load page from the first 'a' element.
$(document).ready(function(){
$("#content").attr("src" , $("a.divlink:first").attr("ref"));
$(".divlink").click(function(){
$("#content").attr("src" , $(this).attr("ref"));
});
});
Use the iframe src property
<iframe id="content" src="page1.html"></iframe>
My problem is the .click event below. The 'nav' and '#closemenu' div hide as expected on document ready, but the click event won't work to save my life. Either I'm missing something embarrassingly small (which I hope is unlikely because I copy/pasted the code from the jQuery API page and then changed only the ID and alert) or else I have no idea what my issue is. Any help is much appreciated.
Here's my code:
$(document).ready(function() {
$('nav').hide();
$('#closemenu').hide();
$('#menuicon').click(function() {
alert('Hello, test');
});
});
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<header>
<h1>Page Title Here</h1>
<div id="menuicon">
<img src="mobile_menu.png">
</div>
<nav>
<ul>
<a href="">
<li class="upCase">Projects</li>
</a>
<a href="">
<li clas s="upCase">Profile</li>
</a>
<a href="">
<li class="upCase">Contact</li>
</a>
</ul>
</nav>
<div id="closemenu">
<p>X</p>
</div>
</header>
</body>
Why don't you just add the event directly like this
For multiple div use the below
$( "#menuicon" ).bind({ click: function(){ alert ();}
});