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>';
}
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 the following pice of code but it is not working for me.
$('#seisUrl').html(""); // reset div.
var urls = url,
filepath , filename;
for(var i=0;i<urls.length;i++){
if(urls[i] != ''){
filename = basename(urls[i]);
filepath = dirname(urls[i]);
$('#seisUrl').append(
'<a rel="zoom-id:zoom; seismic" href="' + filepath + 'thumbnail_' + filename
+ '" rev="' + filepath + 'thumbnail_' + filename
+ '" class="fancyboxseismic"'
+'></a>'
);
}
}
$(".fancyboxseismic").fancybox({
});
The html output is
<div id="seisUrl" style="">
<a class="fancyboxseismic" rev="http://website-dev.uk.spectrumasa.com/mcmap//public/filespool/2/270/thumbnail_seismic_CroatianAdriatic3.jpg" href="http://website-dev.uk.spectrumasa.com/mcmap//public/filespool/2/270/thumbnail_seismic_CroatianAdriatic3.jpg" rel="zoom-id:zoom; seismic"></a>
<a class="fancyboxseismic" rev="http://website-dev.uk.spectrumasa.com/mcmap//public/filespool/2/270/thumbnail_seismic_CroatianAdriatic2.jpg" href="http://website-dev.uk.spectrumasa.com/mcmap//public/filespool/2/270/thumbnail_seismic_CroatianAdriatic2.jpg" rel="zoom-id:zoom; seismic"></a>
</div>
This seems to working fine on my curent site which you can find by browsing to http://www.spectrumasa.com/mcmap/large.php . then go to Meditttereanean-> Adriatic->Croatia. the problematic button is "seismic".
On my dev box i have updated fancybox to 2.1.5 version. I have changed the buttons from list items to normal a tags in a div. using css to style them inline. I have not changed anyother code but it seems like fancybox is not able to pick up the image classes. when i do view source after the images have been appended via jquery it is not there. howver i can see it in firbug console.
seems to work on here but doesn't seem to work on dev bnox
I had a fancybox class where i shouldn't of had. it does work fine.
"<a class='btn' href=\"#\" onclick=\"trackFactsheetView("+surveyId+",\'seismic\');\" >Seismic</a>"
this link was calling another function which was triggering fancyboxseismic.
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/
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 using jquery Cycle to create a featured content slider. In my pager I have an image from each post and a link to the permalink. I can't link to the page, but I hope this image will give an idea of what I am doing:
My problem is that when I click the permalinks in the right nav, they do not open. The links are formed properly and I'm able to right click and open in a new window. It seems like the slider is intercepting my click as a JS click and not a click on the acutaly href link.
Any one experience this problem?
here is my JS
jQuery('#slideWrap').cycle({
speed: 200,
timeout: 0,
pager: '#featuredNav ul',
pagerEvent: 'mouseover',
pagerAnchorBuilder: function(idx, slide) {
return '<li><img src="' + jQuery(slide).find(".featuredSlideImage > img").attr("src") + '" height="50" width="75" />' + jQuery(slide).find(".featuredSlideDesc > h3").html() + ' </li>';
}
});
From http://jquery.malsup.com/cycle/options.html, I would suggest trying the option:
allowPagerClickBubble
And setting it to true instead of its default, false.