Open a lightbox link with simple jQuery - javascript

I have read a lot of answers and different questions but I can't find a clear answer to my problem.
I have this link in my html dom:
Title
I have these two files in the head function:
<script src="script/js/jquery-1.11.0.min.js"></script>
<script src="script/js/lightbox.js"></script>
When the page is loaded it needs to open the link inside the lightbox and people should navigate in the lightbox through the image group that is defined with the data-lightbox.
I tried using this at the end of the body:
<script>
$(".logo").click();
</script>
</body>
But no result :(.
Nothing happens. Page loads but the auto click doesn't do anything.
I had it working but then Lightbox didn't open up. Instead the image of the link was loaded.
All other codes in jQuery work between the script tags.
Am I missing something here?
Please help or ask if things are not clear enough. I am a newbie here and try to play by the rules of the forum.
Thanks in advance!

There are a couple of problems. The link you posted has the class MyClass and you probably need a document ready handler -
<script>
$(document).ready(function() {
$('.MyClass').click();
});
</script>
Which lightbox are you using? There may be additional requirements that you need to implement.

Related

Using the "Header and Footer Scripts" Wordpress Plugin

So I'm working on a Wordpress site for a client, and he wants a div to be clickable. Elementor is making that a pain, so I'm trying to use Javascript to make that happen. The issue is I can't get the click event listener to work, and I can't figure out why. Code is posted. Here's the page I'm working on. The plugin that I'm using is Header and Footer Scripts.
The oddest thing to me is that alert functions still work, but nothing else.
<script type="text/javascript">
document.getElementById("academicsbox").addEventListener("click", function(){
window.location.href = "https://buildinguppeople.net/academics/";
});
</script>
I'm sure I'm overlooking something obvious, but I appreciate the help. Thanks!
Use window.open instead and make sure your academicsbox identifier is in the correct div.
document.getElementById("academicsbox").addEventListener("click", function(){
window.open('https://buildinguppeople.net/academics/', "_self");
console.log("working");
});
Working example: https://codepen.io/fraggley/pen/VwvXpQg

Pinterest tag firing multiple times on single page app

I am using the pinterest tag code out of the box on a single page app, and it fires multiple times on navigation. Any suggestions on how to make if fire only once?
<script type="text/javascript">
!function(e){if(!window.pintrk){window.pintrk=function(){window.pintrk.queue.push(Array.prototype.slice.call(arguments))};var n=window.pintrk;n.queue=[],n.version="3.0";var t=document.createElement("script");t.async=!0,t.src=e;var r=document.getElementsByTagName("script")[0];r.parentNode.insertBefore(t,r)}}("https://s.pinimg.com/ct/core.js");
pintrk('load','<YOUR_TAG_ID>', {
em: '<email_address>',
});
pintrk('page');
</script>
Thanks
I resolved the issue. the pinterest code was being loaded by a tag to the external library to my code. Thanks for your answers

How to load remote html page links in the same <div> container?

This is going to be very hard for me to explain, but I'll give it my best shot.
I am writing a sort of portable book system, using HTML, CSS, and JavaScript. It's essentially a website; you can throw the package up online and it can function like a full website, or keep it local on the machine to read it as if it were a website.
This means I cannot use things like PHP or MySQL; this is all using browser functionality, as anyone who is reading it on their own computer likely wouldn't have WAMP or the like installed to run it.
I'm having a problem trying to make it so that in my main .htm file's <div id="content"> tag always loads external .htm file, even when those external .htm files have <a> links of their own.
I have tried using jQuery to run load(), but when the new content rendered and I clicked on those links inside that new content, it completely drew away from my main page and loaded the full external .htm file into my browser.
And I think I understand why. When I use the $('a') after loading, it only renders that function to the index.htm's own links, and not the new ones I load into the <div>.
I don't want this effect. I want each and every single link loaded each and every single time to always draw content from the linked .htm file into the index.htm's <div>.
I have looked around and found several related answers here, but they either don't work or give me the same result. One was a plugin called "PJAX", which looked like it worked in the library example, but when I loaded it into my own project it wasn't running. I have tried using the ajax() calls I saw in another answer that addressed the url cache and success parameters, and that didn't work.
What am I doing wrong? I didn't think something as simple as loading an external .htm file and repeating the load inside its <a> wouldn't be so intricate as whatever is cutting me off from fixing this. I thought the load() function did the job up until I clicked the other <a> links.
Code Examples to help clarify what I'm talking about. Not full files or perfect, but a model.
index.htm
<body> <!-- book interface -->
<div id="content"></div>
</body>
page2.htm
<body> <!-- a sample page read on the book, fed in the #content -->
test link <!-- link inside the page -->
<!-- ^^^ That link is supposed to open the page1 inside the #content tag of index.htm instead of on its own. -->
</body>
renderpage.js
$(document).ready(function(){
$('a').click(function(e){
e.preventDefault();
$('#content').load($(this).attr('href'));
return false;
});
});
When page2's link loads inside index's <div>, and you click the link inside it, it doesn't change the <div> to page1's content. It reloads the entirety of page1 into the browser.
Turns out Chad's answer was correct. If anyone feels like chiming in, I'd like to learn how this works as it did.
$(document).ready(function(){
$(document).on('click', 'a', function(e){
e.preventDefault();
var ahref = $(this).attr('href');
$('#content').load(ahref);
return false;
});
});

jquery lightbox working on one page, but not another on same site

A programmer installed jquery lightbox and everything was working fine on
http://www.ozhiphopshop.com.au/sub_photos.php?id=11
I wanted to use the exact same effect for the one image on
http://www.ozhiphopshop.com.au/product_detail.php?pro_id=69
In the included header file I've changed the changed the following script (which is working fine on the first page):
<script type="text/javascript">
$(function() {
$('#gallery a').lightBox();
$('#gallery1 a').lightBox();
});
</script>
to:
<script type="text/javascript">
$(function() {
$('a.pro_img').lightbox();
});
</script>
but that doesn't seem to work. And the linked file is opening in a new window.
The div class for the file I want the lightbox to work with is 'pro_img' which is why I made the change the way I did.
I've made no changes to the css or the js files, which may be where I'm going wrong.
I'm not a programmer, so I've just been trying to reverse engineer what was done on the first page. I'm really interested in learning more about programming, hence the reason I'm doing it myself.
I've noticed the same question on here, but none of the answers seemed to relate to exactly what I'm dealing with.
Any help would be appreciated.
All the best,
Michael
change
$('a.pro_img').lightbox();
to
$('div.pro_img a').lightbox();

Basic Javascript Image Gallery

I'm trying to setup a very basic jQuery image gallery.
You can see my attempts here: http://training.customstudio.co.uk/portfolio/detail/ee_project_four
I've duplicated the code from another site we created, have changed all the relevant div reference, but can't for the life of me get it working.
The images seem to be loading, but the jQuery effects not working.
Hopefully one of you guys can see the problem.
Thanks in advance,
Tom Perkins
This question is beyond simple.
Check in your head tag and find this..
<script type="text/javascript" src="-/js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript" src="-/js/jquery-1.4.3.min.js"></script>
Correct them because they do not refer to actual javascript files but Html files

Categories

Resources