I need to open lightbox when clicking on href link.
I tried the following code but it doesn't open the lightbox (the url opens in the same browser).
Would you please let me know how to open lightbox?
Existing code (created by using DWQA plugin):
<div class="dwqa-questions-list">
<div class="dwqa-question-item dwqa-status-answered">
<header class="dwqa-question-title">
Question One
</header>
</div>
<div class="dwqa-question-item dwqa-status-answered">
<header class="dwqa-question-title">
Question Two
</header>
</div>
</div>
Lightbox code I tried:
The console shows one error:
Unexpected token '<' => <!DOCTYPE html>
?>
<script language="JavaScript" type="text/javascript" src="jquery/jquery.js"></script>
<script>
(function($){
$(document).ready(function() {
$("a", ".dwqa-question-title").click(
function(event) {
event.preventDefault();
var elementURL = $(this).attr("href");
$.colorbox({iframe: true, href: elementURL, innerWidth: 645, innerHeight: 509});
});
});
});
</script>
Thank you.
Related
I have divided my html-file into a header.php, content.php and footer.php
I would like to load the js files and the document.getready function either in the hader or in the footer file. But I got an error saying: Uncaught ReferenceError: $ is not defined.
In my header.php I load the following scripts in the head section:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js" async></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.js" async></script>`
And in my Footer after the closing </body>-Tag I call:
<script>
$(document).ready(function() {
if( !window.isCMS) {
// Group images by gallery using data-fancybox-group attributes
var galleryId = 1;
$('.editable-gallery').each( function() {
$(this).find('a').attr('data-fancybox', 'gallery-' + galleryId++);
});
$('.editable-gallery').each( function() {
$(this).find('img').attr('width', '200');
});
// Initialize Fancybox
$("[data-fancybox]").fancybox({
// Use the alt attribute for captions per http://fancyapps.com/fancybox/#useful
//beforeShow: function() {
// var alt = this.element.find('img').attr('alt');
//this.inner.find('img').attr('alt', alt);
//this.title = alt;
//}
});
}
});
</script>
In my content.php file I include my header.php and footer.php like this:
<?php include ("header.php"); ?>
<?php include ("footer.php"); ?>
How and where do I have to implement the script files and the document.getready function?
This is my Gallery Code in my content.php:
<div id="my-gallery" class="editable-gallery">
<img src="fotos/2018/rl/02022018/3.jpg" alt="">
<img src="fotos/2018/rl/02022018/1.jpg" alt="">
<img src="fotos/2018/rl/02022018/3.jpg" alt="">
</div>
I have to add the attr "data-fancybox" and "width" to work with fancybox.
1st:- The error comes from src="http://code.jquery.com/jquery-latest.min.js" it should be https instead of http >> src="https://code.jquery.com/jquery-latest.min.js"
2nd:- you can include js files or js code in <head> OR BEFORE </body>
3rd:- you can use <script></script> anywhere from <head> to </body> even before the line you including your jquery BUT use $(document).ready(function(){ //code here })
Note: if you have any plugins you must include the plugins after including jquery
your js code works fine
$(document).ready(function() {
//if( !window.isCMS) {
// Group images by gallery using data-fancybox-group attributes
var galleryId = 1;
$('.editable-gallery').each( function() {
$(this).find('a')
.attr('data-fancybox', 'gallery-' + galleryId++).find('img').attr('width' , '200');
});
// Initialize Fancybox
$("[data-fancybox]").fancybox({
// Use the alt attribute for captions per http://fancyapps.com/fancybox/#useful
//beforeShow: function() {
// var alt = this.element.find('img').attr('alt');
//this.inner.find('img').attr('alt', alt);
//this.title = alt;
//}
});
//}
});
<!-- 1. Add latest jQuery and fancyBox files -->
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.js"></script>
<!-- 2. Create links -->
<div id="my-gallery" class="editable-gallery">
<img src="http://via.placeholder.com/350x150" alt="">
<img src="http://via.placeholder.com/350x150" alt="">
<img src="http://via.placeholder.com/350x150" alt="">
</div>
<!-- 3. Have fun! -->
I have a div block that I only want to display on the first page. I mean, if the user is on
http://mywebsite.com/
it displays the div. But if he navigates to the second page of the posts
http://mywebsite.com/page/2
it hides that div. I am using Datalife Engine.
Div example:
<div class="example"> This is a test </div>
Can this be done?
follow this and all be worked fine.
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
if( $('#mainPage').length > 0 ) {
$("#hideMe").css({"display": "block"});
} else {
$("#hideMe").css({"display": "none"});
}
});//end doc ready function
</script>
</head>
<body>
<div id="mainPage"> </div>
<div id="hideMe">lorem ipsum</div>
</body>
hope it helps you
example http://jsfiddle.net/viktorino/56ea5/
For datalife engine, display just on the first page we use:
[page-count=1]Content goes here[/page-count]
I made a side menu with these links:
<div id="menu_lat">
Orçamentos
Relatórios
Próximos Eventos
Chat
</div>
When I open one of these, the content is opened in another div (which, in the first page, already has some content, which is an image):
<div id="conteudo">
<img src="img/foto_inicial.jpg">
</div>
How could I load the PHP file inside this layer when I click that link?
Use jQuery and the load() function
Update you links with a class
<div id="menu_lat">
<a class="loader" href="http://localhost:8080/sgf/form_proposta.php">Orçamentos</a>
<a class="loader" href="relatorios.html">Relatórios</a>
<a class="loader" href="proximos.html">Próximos Eventos</a>
<a class="loader" href="chat.html">Chat</a>
</div>
Then in your <script> tags add this to handle the click event on your links with the class loader.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('.loader').click(function(event) {
event.preventDefault(); // stop the link loading the URL in href
$('#conteudo').load($(this).attr('href'));
});
});
</script>
DO the Ajax call on the DIV id conteudo
I am a newbie on AJAX, I have a link that loads table.php. Then it writes the code to the index.php. In that code, I have another link to
show the info.php. Is it possible to do this?
<!--This is index.php-->
<div id="link">my Info</div><!--it works here-->
<div id="link">My Table</div>
<div id="table"></div>
<div id="info"></div>
<!--My javascript-->
<script type="text/javascript">
$(document).ready(function() {
$('#link a').click(function(){
var page = $(this).attr('href');
if(page =='table')
$('#table').load('table.php');
else if(page =='info')
$('#info').load('info.php');
return false;
})
});
</script>
<!--This is table.php-->
<div id="link">my Info</div><!--it doesn't works here-->
<!--This is info.php-->
<h1>My info</h1>
Your three <div> (as pointed out by #scragar) have the same id link, most probably causing the issue. Make it a class like that :
<div class="link">
And in your JS :
$('.link a')
EDIT : As noted by dbf, you must as well declare your handler with live() or on() instead of click() :
$('.link a').live('click', function(){ ... });
in order for it to be binded after table.php is loaded in the page. ( http://api.jquery.com/live/ )
I would like to know if there is a way to be able to click a Link on the navigational Div tag and have it display on the content Div like if i had
<div id="nav">
a link </div>
<div id="content>show the stuff</div>
From the comments below - the OP stated the following :
I am trying to redo a website but my imagagination is getting the better of me. If I have three links like home, about author, and about our mission. I would like to be able to click about author and in the main_content div tag show the html file aboutauthor.html
Alt 1: Use jquery tabs:
See demo and code here: http://jqueryui.com/demos/tabs/
Alt 2: Hide/show div in same html file:
HTML:
<div id="nav">
Show content 1
Show content 2
Show content 3
</div>
<div id="content1" class="toggle" style="display:none">show the stuff1</div>
<div id="content2" class="toggle" style="display:none">show the stuff2</div>
<div id="content3" class="toggle" style="display:none">show the stuff3</div>
jQuery:
$("#nav a").click(function(e){
e.preventDefault();
$(".toggle").hide();
var toShow = $(this).attr('href');
$(toShow).show();
});
Demo: http://jsfiddle.net/5NEu3/3/
Alt 3: Load from server ondemand:
To load html into your main div you should use: http://api.jquery.com/load/
Follow examples on that site. And be aware that the html side you are loading must be in same domain as you are hosting the new page.
Html
Show content 1
Show content 2
jQuery
$("#nav a").click(function(e){
e.preventDefault();
$('#maindiv').load($(this).attr("href"));
});
Using jQuery, you could do something like this.
This will open the site <a href="example.html"> and put it inside of the <div id="content"> when you click it, and then disable changing the whole site.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('#nav a').click(function(e) {
e.preventDefault();
$('#content').load($(this).attr('href'));
});
});
</script>
<div id="nav">
Some page
Some other page
My page
</div>
<div id="content">
show the stuff
</div>
Something like this:
function setContent(div, content)
{
getElementById(div).innerHtml = content;
return false; // return false to ignore the click
}
a link
to show a hidden div (i think this is what you wanted)
the javascript (using jQuery)
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#showdiv").click(function () {
$("#hiddendiv").show();
});
});
<script>
the html
Show the Div
<div id="hiddendiv" style="display:none;">Content here</div>
you can see it in action here