I'm a graphic design student and I'm making a portfolio website. I wanted a lightbox as a way to show my work. I finally got everything working, except for one problem.
Whenever I load my page, the lightbox also loads. I don't want this. I want the lightbox to only show when people click on thumbnails of my work.
I followed this tutorial from Tutsplus because I am not that familiar with jQuery. The only thing I changed in the script was so the lightbox would fade in and fade out when clicking.
This is the code I'm using
</script><script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function($) {
$('.lightbox_trigger').click(function(e) {
//prevent default action (hyperlink)
e.preventDefault();
//Get clicked link href
var image_href = $(this).attr("href");
/*
If the lightbox window HTML already exists in document,
change the img src to to match the href of whatever link was clicked
If the lightbox window HTML doesn't exists, create it and insert it.
(This will only happen the first time around)
*/
if ($('#lightbox').length > 0) { // #lightbox exists
//place href as img src value
var maxheightvalue = $("#lightbox").height() -60;
$("#lightbox img").css("max-height", maxheightvalue + "px");
$('#lightbox').fadeIn(400);
$('#content').html('<img src="' + image_href + '" />');
//show lightbox window - you could use .show('fast') for a transition
}
else { //#lightbox does not exist - create and insert (runs 1st time only)
//create HTML markup for lightbox window
var lightbox =
'<div id="lightbox" style="display:none">' +
'<p>Click to close<\/p>' +
'<div id="content">' + //insert clicked link's href into img src
'<img src="' + image_href +'" />' +
'<\/div>' +
'<\/div>';
//insert lightbox HTML into page
$('body').append(lightbox);
}
});
//Click anywhere on the page to get rid of lightbox window
$('#lightbox').live('click', function() { //must use live, as the lightbox element is inserted into the DOM
$('#lightbox').fadeOut(300);
});
});
//]]>
</script>
I am pretty sure it's a real mess, but so far it's worked except for that one little thing. But if someone could clean it up (if possible) I would be very grateful.
your can try using this example
$(document).ready(function(){
$("#some").on("click", function(){
$("#gallery").lightbox();
});
});
the above is to load the lightbox for ur gallery or desired ID.
http://api.jquery.com/on/
Related
I'm pretty new to this. I'm trying to trigger a preview of a link via an iFrame, triggered by a hover (mouseover) event.
Here's the JSFiddle of what I have so far: https://jsfiddle.net/80so5jyL/
It works right the first time, but when I hover back and forth on a link more than once, it duplicates the display. How can I ensure that there's only one iFrame popping up every time?
I tried unbinding the mouseover/mouseout events (that commented out line), and it prevents the duplication issue, but also doesn't allow me to display over that same link again, even after I've hovered out, or over a different link (which it still lets me do).
HTML:
<a class="tester" href="http://therainforestsite.com">Link Uno</a>
<a class="tester" href="http://www.example.com">Link Dos</a>
CSS:
.tester { display: block;
margin: 50px;
}`
JS (jQuery):
$("a").mouseover(function() {
var thisURL = $(this).attr('href');
console.log(thisURL);
var theCode = '<style>.preview {display:none;position:absolute;margin-left:0px;z-index:10;border:1px;solid #000;width:100px;height:100px;}</style><iframe class="preview" src="' + thisURL + '"></iframe>';
$(this).append(theCode);
$(this).children(".preview").show();
}).mouseout(function() {
$(this).children(".preview").hide();
//$(this).unbind('mouseover');
return;
});
Any ideas?
Its happening because you are appending it to this everytime and thus it is getting duplicated. Use .html instead and also do not put it inside this i.e. a tag when you use html. Keep it in a separate element, because when you use .html it will replace the contents and a tags text will be gone.
So I would suggest to use below html
Some Link<br/><br/>
Example Link
<p class="bigPreview"></p>
CSS
.bigPreview{
display:none
}
and in JS
$("a").mouseover(function() {
var thisURL = $(this).attr('href');
var theCode = '<style>.preview {display:none;position:absolute;margin-left:0px;z-index:10;border:1px;solid #000;width:100px;height:100px;}</style><iframe class="preview" src="' + thisURL + '"></iframe>';
$('.bigPreview').html(theCode).show(); //put it into .bigPreview and use .show on it
}).mouseout(function() {
$('.bigPreview').html('').hide(); //clear its html and hide it
});
I have two domains that are closely related to each other. Because of this I'm putting a fixed box on the top right corner of the page so that users can quickly jump between the two sites. However I would like to add a page transition to this action so that when the user clicks the link in the box the site will gracefully transition to the new URL.
I know you can do this with internal pages via JQuery Mobile ( http://demos.jquerymobile.com/1.1.0/docs/pages/page-transitions.html ), however the limitation is that the link has to be ajax, and can not be activated to new URL's.
Does anyone know how to accomplish this? Ideally I would like to use the "Flow" or "Slide" transition. However I'll take any example or reference you can provide and adapt it to my needs.
The solution does not necessarily need to be jQuery, it can be javascript, HTML 5, CSS or any other solution that may work.
Thanks,
~Andrew
For me it would work something like this:
Pseudo HTML:
<body>
<div id="page1"> <!-- Content goes here --> </div>
</body>
Pseudo JQuery:
on AJAX complete {
var newID
var oldID
if ($('#page1').length) { // Work out old and new ID's
newID = 'page2'
oldID = 'page1'
} else {
newID = 'page1'
oldID = 'page2'
}
$('body').append('<div id="' + newID +'" style="display:none;">' + DataFromAjaxCall + '</div>') // Append the body with a hidden div containing new content
$('#' + oldID).fadeOut(400, function() { // Fade the old one out and then remove it
$(this).remove();
});
$('#' + newID).fadeIn(400); // Fade the new one in
}
This question already has answers here:
Turning live() into on() in jQuery
(5 answers)
Event handler not working on dynamic content [duplicate]
(2 answers)
Closed 9 years ago.
I have been using this code to get a simple lightbox working on a site of mine.
And I tried to modify it slightly so:
a) The lightbox fades in- Done
b) The script pulls in the src attribute not the href- Done
b) I can pull in data from a custom "data-description" attribute on the <img> that is being clicked (or tapped I suppose) to a <p> in the lightbox.
Issues
With the second, when the image is first clicked, It works fine. When any other is clicked, or it is clicked again, nothing happens- I can't work out why as I seem to be doing it right?
Also, when using jQuery 1.9, live() is apparently depreciated- I was using 1.8.2 before and didn't notice until now, I have tried on() with no sucess, and being a JS beginner am puzzled as to how to fix it, this issue means that the lightbox won't close.
Almost-working-but-broken code here: http://codepen.io/hwg/pen/ybEAw - Sorry about all the comments but I find it easier that way.
JS:
$(document).ready(function() { //Document Ready
$('.inner_img').click(function(e) {
//prevent default action (hyperlink)
e.preventDefault();
//Get clicked link href
var image_src = $(this).attr("src");
// Get Description
var desc = $(this).attr("data-description");
/*
If the lightbox window HTML already exists in document,
change the img src to to match the href of whatever link was clicked
If the lightbox window HTML doesn't exists, create it and insert it.
(This will only happen the first time around)
*/
if ($('#lightbox').length > 0) { // #lightbox exists
//place href as img src value
$('#content').html('<img src="' + image_src + '" />');
// Change Description in the P tag
$('.desc').html(' '+ desc +' ');
//show lightbox window - you could use .show('fast') for a transition
$('#lightbox').fadeIn(); // Fades it in
}
else { //#lightbox does not exist - create and insert (runs 1st time only)
//create HTML markup for lightbox window
var lightbox =
'<div id="lightbox">' +
'<p>Click to close</p>' +
'<div id="content">' + //insert clicked link's href into img src
'<img src="' + image_src +'" />' +
'<p class="desc">'+ desc +'</p>' + // Adds Description from <img data-description="..">
'</div>' +
'</div>';
//insert lightbox HTML into page
$(lightbox).hide().appendTo("body").fadeIn();
}
});
//Click anywhere on the page to get rid of lightbox window
$('#lightbox').on('click', function() { //must use live, as the lightbox element is inserted into the DOM
$("#lightbox").fadeOut(); // Fades it out
});
}); // End
Thanks for any help.
EDIT: I have been shown that the live/on issue is very common, I can see where I went wrong. Thanks for the assistance on this commenters.
However, why won't my code work for the second issue?
use event delegation with on -
$(document.body).on('click','#lightbox', function() {
$("#lightbox").fadeOut(); // Fades it out
});
Demo ---> http://codepen.io/anon/pen/ywJhe
You can change
$('.inner_img').click(function(e) {
to
$(document.body).on('click', '.inner_img', function(e) {
so that events occurring after the binding will still be delegated to the new elements.
I'm tweaking a gallery plugin for a site that I'm working on, so that it will support titles. This is this script I'm working with:
DEMO: http://jquery.malsup.com/cycle/pager2.html
CODE: http://malsup.github.com/jquery.cycle.all.js
I have everything working, except I need the alt attribute from the original image to be copied to the thumbnails on load, but I can't figure out where things are getting restructured in this script.
This is the modification that I'm using:
$(document).ready(function() {
$("#slideshow-wrap #nav li a img").click(function() {
var caption = $(this).attr("alt");
$("#slideshow-wrap #caption").html(caption);
});
});
(The above code works, I just need to copy the ALT attribute from the original <img> to the jQuery-generated <img> thumbnail.)
If I understand correctly what you need, the changes you have to make to the example given on the page are minimal:
pagerAnchorBuilder: function(idx, slide) {
return '<li><img src="' + slide.src + '" width="50" height="50" />' + slide.alt + '</li>';
}
I have a navigation list. The effect I am looking for is when the user clicks on a link, an accordion style div is built and displayed by jQuery. Then if the user clicks the same screen, the is deleted from the screen.
Here's some cod that will create an DIV if it is not already there, load it with some HTML from the URL contained in a link's HREF attribute, then turn it into an accordion. If the DIV already exists, it removes it.
$('.navLink').click( function() {
var accordion_id = 'accordion_' + this.id;
var accordion = $('#' + accordion_id);
if (accordion.length > 0) {
accodion.remove();
}
else {
$('<div id="' + accordion_id + '"></div>')
.appendTo('#someDiv')
.load( $(this).attr('href') )
.accordion();
}
return false; // cancel default action of link
});
Yes, I'm quite sure that this is possible. It looks like there may be plugins and third-party tools out there that can help you with this task. This one looks promising: http://jqueryui.com/demos/accordion/