|
|
| Author |
Message |
| duhawkz |
This post is not being displayed .
|
duhawkz
World Chat Champion
Joined: 03 Dec 2006
Karma : 
|
 Posted: 00:31 - 16 Feb 2017  Post subject: help me! javascipt/css lightbox |
 |
|
trying to make an image gallery and have the images pop up in a light box when you click on them
you add images to an unordered list, like so
| Code: |
<div id="thumbnails">
<ul class="aClass">
<li><div class="thumbnail-div"><a href="the full size image" title="title"><img class="portrait" src="the thumb"></a></div></li>
<li><div class="thumbnail-div"><a href="the full size image2" title="title"><img class="portrait" src="the thumb2"></a></div></li>
</ul>
</div>
|
the above code, works and all is good in the world if the line items are hard coded.
however however i am not using static content, i'm pulling the image info from an api so i have some code to handle the request to the api and as part of that a function that parses the response and display the images.
something like this
| Code: |
function display_images(response) {
for (var i = 0; i < response.data.length; i++){
// do some stuff here to extract the required info from response
$('.aClass').append('<li><div class="thumbnail-div"><a href="' + picture + '" title="' + name +'"><img class="' + orientation + '" src="'+ thumb +'"></a></div></li>'');
}
}
<div id="thumbnails">
<ul class="aClass">
</ul>
</div>
|
this works ok and the images display on the gallery page as expected, but the lightbox doesn't work, the thumbnail just becomes an link to fullsize image.
if i console log the html from the above .append() and manually add it to the ul, the lightbox work perfectly.
so i know a the lightbox works and the html I'm appending is correct
help it's doing my head in
____________________
"The guy is a worthless cunt and I honestly believe I would be a slightly happier person if he died." - Chris-Red |
|
| Back to top |
  |
You must be logged in to rate posts |
|
 |
| Evil Hans |
This post is not being displayed .
|
Evil Hans
World Chat Champion
Joined: 08 Nov 2015
Karma : 
|
|
| Back to top |
| |
You must be logged in to rate posts |
|
|
| duhawkz |
This post is not being displayed .
|
duhawkz
World Chat Champion
Joined: 03 Dec 2006
Karma :
|
| Posted: 11:11 - 16 Feb 2017 Post subject: |
|
|
Further googling tells me its an ordering issues
https://stackoverflow.com/questions/6658752/click-event-doesnt-work-on-dynamically-generated-elements
The dynamically add bit aren't the until the to code that generates them runs
So you need to do something like
| Code: |
$('#thumbnails').on ('click', 'li', function(){
$(this).lightBox ()
});
|
To register them but i can't get it to work with that either
I forgot to mention that i'm not seeing any errors in the console either so everything appears to be executing correctly
____________________
"The guy is a worthless cunt and I honestly believe I would be a slightly happier person if he died." - Chris-Red |
|
| Back to top |
| |
You must be logged in to rate posts |
|
|
| ScaredyCat |
This post is not being displayed .
|
ScaredyCat
World Chat Champion
Joined: 19 May 2012
Karma : 
|
Posted: 15:01 - 16 Feb 2017  Post subject: |
|
|
If you're creating the elements dynamically then you'll need to trigger the
| Code: | $('#thumbnails').on ('click', 'li', function(){
$(this).lightBox ()
});
|
after their creation. If you have that code ^^ at the foot of your page and are expecting it to work it wont because you haven't appended the elements until after the page has loaded and whatever triggering event has happened. I.E.
You'd have
| Code: |
1. Load page
2. Execute "$('#thumbnails').on ('clic.."
3. Some thing took place returning image uris
4. Execute display_images, appending li and div
|
What you need is
| Code: |
1. Load page
2. Some thing took place returning image uris
3. Execute display_images, appending li and div
4. Execute "$('#thumbnails').on ('clic.."
|
Depending on what you're actually doing on your page. It's going to depend largely on what is going on because if it's a one off event then just stick the "$('#thumbnails').on ('clic.." in display_images after all the work is done.
____________________
Honda CBF125 ➝ NC700X
Honda CBF125 ↳ Speed Triple |
|
| Back to top |
| |
You must be logged in to rate posts |
|
|
| duhawkz |
This post is not being displayed .
|
duhawkz
World Chat Champion
Joined: 03 Dec 2006
Karma :
|
|
| Back to top |
| |
You must be logged in to rate posts |
|
|
| duhawkz |
This post is not being displayed .
|
duhawkz
World Chat Champion
Joined: 03 Dec 2006
Karma :
|
| Posted: 22:52 - 16 Feb 2017 Post subject: |
|
|
| Code: | function display_images(response) {
$('.clearfix').html("")
for (var i = 0; i < response.data.length; i++){
// do some stuff
$('.clearfix').append('<li><div class="thumbnail-div"><a href="' + picture + '" title="' + name +'"><img class="' + orientation + '" src="'+ thumb +'"></a></div></li>');
}
// moved the on click inside the display_images function after the for loop
$('#thumbnails').on('click', 'li', function (){
lightBox();
});
} |
moving the .on() binding inside display images doesn't work either
____________________
"The guy is a worthless cunt and I honestly believe I would be a slightly happier person if he died." - Chris-Red |
|
| Back to top |
| |
You must be logged in to rate posts |
|
|
| duhawkz |
This post is not being displayed .
|
duhawkz
World Chat Champion
Joined: 03 Dec 2006
Karma :
|
| Posted: 02:11 - 17 Feb 2017 Post subject: |
|
|
| Code: | function display_images(response) {
$('.clearfix').html("")
for (var i = 0; i < response.data.length; i++){
// do some stuff
$('.clearfix').append('<li><div class="thumbnail-div"><a href="' + picture + '" title="' + name +'"><img class="' + orientation + '" src="'+ thumb +'"></a></div></li>');
}
// moved the on click inside the display_images function after the for loop
$(function() {
$('#thumbnails a').lightBox();
});
} |
fixed it, this ^ was the secret sauce
____________________
"The guy is a worthless cunt and I honestly believe I would be a slightly happier person if he died." - Chris-Red |
|
| Back to top |
| |
You must be logged in to rate posts |
|
 |
Old Thread Alert!
The last post was made 7 years, 69 days ago. Instead of replying here, would creating a new thread be more useful? |
 |
|
|
Help & FAQs
Search BCF
Members
Groups
Events Calendar
rating
rating