Lightgallery not working (using jade and loading page separately) - javascript

I am relatively new to javascript and I cannot figure out what I might be doing wrong here to implement lightgallery in my code.
I included all stylesheets (in the header) and relevant scripts. Here is what part of my head and body looks like.
head
link(rel='stylesheet', href='nodescripts/css/lightgallery.css')
body
//jade block for pages
block content
script(src='/nodescripts/jquery.min.js')
script(src='/nodescripts/bootstrap.min.js')
script(src='/nodescripts/wow.min.js')
//gallery
script(src='/nodescripts/js/lightgallery.js')
script(src='nodescripts/js/lg-thumbnail.min.js')
script(src='nodescripts/js/lg-fullscreen.min.js')
script(src='https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js')
script(src="/javascripts/loadPages.js")
script.
//loads main menu page (function from loadPages.js)
loadIndex()
script.
$(document).ready(function() {
$("#lightgallery").lightGallery({
selector: '.item'
});
});
The loadIndex function in loadPages.js (goes to server side, works without a pb)
function loadIndex (){
$.get('/Index', function(content){
$("#upperContainer").css('background-image', 'url(/images/SF-background.jpg)');
$('#mainContainer').html(content);
});
}
And here is the images markup I use:
#photoRow.row
ul#lightgallery
li
a.item(href='/images/s-gallery/big(1).jpg')
img(src='/images/s-gallery/small/small(1).jpg')
li
a.item(href='/images/s-gallery/big(2).jpg')
img(src='/images/s-gallery/small/small(2).jpg')
li
a.item(href='/images/s-gallery/big(3).jpg')
img(src='/images/s-gallery/small/small(3).jpg')
The lightgallery is supposed to appear in the index page, which is loaded by the loadIndex() function (I am using a navbar with several pages).
Am I not doing the lightgallery call properly? Is my $(document).ready(...) happening at the same time than my index page is being loaded? (Though I know that scripts are technically called synchronously).
Basically my images show no effect at all and remain a non styled list..
Can someone help?

Call lightGallery from the loadIndex function as below.
Because it is an AJAX function the callback is executed after the document ready function is fired so the plugin could not find any elements to work with.
function loadIndex (){
$.get('/Index', function(content){
$("#upperContainer").css('background-image', 'url(/images/SF-background.jpg)');
$('#mainContainer').html(content);
$("#lightgallery").lightGallery({
selector: '.item'
});
});
}

Related

Dynamically inserted header and footer don't appear

Hello guys I have one question...
I use JQM 1.4 ... and it sometimes happens that when i click a button an get reddirected (to a new HTML5 file)... on the new page the header and footer are without style... it doesn't happen always but I cant have a page like this...
For the footer and header I use external HTML files (header.html and footer.html) and i call them with
$('#pageprostoriheader').load('header.html').trigger("create");
$('#pageprostorifooter').load('footer.html').trigger("create");
As I said it doesn't happen very often but when it does is ugly ...
I have a multiPage template and i think maybe this is caused because the header and footer don't get loaded quick enough .... so its possible to make like a loader that waits till is everything ready till it shows the page ?
As of jQuery Mobile 1.4, .trigger("create") is deprecated and will be removed on 1.5. Moreover, to create header/footer you should have used .trigger("pagecreate"), however, it is also deprecated and will be removed.
The replacement of the aforementioned functions is .enhanceWthin() to be called on parent element. This issue has several solutuins
Enhance toolbars after successful .load(), using .toolbar().
$('#pageprostoriheader').load('header.html', function () {
$(this).toolbar();
});
$('#pageprostorifooter').load('footer.html', function () {
$(this).toolbar();
});
Enhance toolbars after successful .load(), using .enhanceWithin() on active page.
$('#pageprostoriheader').load('header.html', function () {
$.mobile.pageContainer.pagecontainer("getActivePage").enhanceWithin();
});
$('#pageprostorifooter').load('footer.html', function () {
$.mobile.pageContainer.pagecontainer("getActivePage").enhanceWithin();
});
If you're using the same toolbars on all pages, I recommend using External toolbars.
Add HTML markup of header and footer in <body> not inside page div, and then add the below code in head after jQuery Mobile.js.
$(function () {
$("[data-role=header], [data-role=footer]").toolbar();
});

Execute jQuery script after its being loaded in via jQuery .load

In page Index.html there is a selectbox called #choose_content_to_load and a div called #get_loaded_content
<select id="choose_content_to_load">
<option>Some content from page content.html and div #content</option>
</select
<div id="get_loaded_content">
As seen in the selectbox option there is a page called content.html that contains a div called #content. In the current situation the div #content get loaded into #get_loaded_content when click on the option by using this script:
$(document).ready(function(){
$("#choose_content_to_load").change(function(){
var selectedOption = $('#choose_content_to_load :selected').val();
$containerDiv = $('#get_loaded_content');
$containerDiv.html("");
switch (selectedOption)
{
case "Some content from page content.html and div #content":$containerDiv.load( "content.html #content" , function(){$(document).trigger("reload_javascript");});break;
}
return true;
});
});
As you see the script also trigger a "reload" of all the scripts "reload_javascript". This is becuse the div #content have some more design elements that needs to be executed at the load in. These scripts looks like this:
$(document).on("ready reload_javascript" ,function() {
script
});
This works fine and all the loaded elements initializes and works, this becuse Index.html and content.html share the same design scripts (same .js file) so the scripts just need to "run again" to work. Now to the problem, the div #content need to have a larger script that only execute when the div is being loaded into #get_loaded_content in Index.html. Its not good to have the script in the .js file that both index.html and content.html share becuse its alot of code.
So the new script need to be put direct into the #content html using tags and execute when this div is being loaded in.
First I thought the new script will run just by adding the reload_javascript but then I realised that dident execute the script just initialize it (I think). I hope somebody can help me with this and please have in mind that I try to learn jQuery (beginner at coding).
Thanks alot.
If i understand you correctly you are loading <script> tags into content and wish for it to execute? If so call this function i made a while back after insertion.
/**
*This function is supposed to execute script after script insertions
*/
function execute(){
$('#content script').each(function() {
var _script = document.createElement('script');
_script.type = 'text/javascript';
_script.setAttribute('async', 'true');
/**
*IEFIX (IE does not support .innerHTML on createElement)
**/
if(!_script.innerHTML){
_script.text=$(this).html().replace('\\\\',"\\");
}else{
_script.innerHTML = $(this).html().replace('\\\\',"\\");
}
document.body.appendChild(_script);
});
}

Execute script after loaded in div [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Initialize script
I have a page (Page1.html) and in this page a div (#div1) that get its content from other divs in another page (Page2 #div1/2/3/4/5). The content is loaded in by jQuery load script. The content is loaded in based on choice in a select box, so the content is loaded in after Page1 has finish loaded.
Problem:
When I get some content from Page2 that's depending on jQuery, these elements don't work. They don't execute.
My questions:
Is there any way to make the a whole inloaded #div from Page2 (all the content) to execute WHEN its loaded in? Right now the existing elements "initialize" when they are loaded in, for example: function initializeSlider(){ slider };.
Now I am trying to add in some more elements depending on jQuery, and wounder if initializing all the objects is the correct way of execute all these scripts, or is there any way that execute all the jQuery elements at once so no need to initializing all object one by one?
Executing or Initializing one script:
If there is no way to execute/initialize all scripts at once when a div is loaded in. I am trying to execute or initialize this script without success, have tried both the "$(document).ready(function() {" and initialize it similar to the slider but the element is not executing.
$(document).ready(function() {
$(".lil").click(function () {
$(this).toggleClass("highlight");
});
});
Depending on what you're initializing; for events make sure and use .on():
$("#div1").on('click', '.lil', function () {
$(this).toggleClass("highlight");
});
Use:
$(document).ready(function() {
$("#div1").on('click', '.lil', function () {
$(this).toggleClass("highlight");
});
});
You could give that function a name. Something like:
function toggleClasses(classToToggle) {
$(classToToggle).click(function () {
$(this).toggleClass("highlight");
});
}
Then, your main page could have:
$(document).ready(function() {
toggleClasses('.lil');
});
And at the bottom of the partial view that you load from page 2, add this:
<script>
toggleClasses('.partialViewClass');
</script>
That way, as soon as that Partial View is done loading, it will call that same function.
If all you're doing is toggling that class, you might want to add a parameter for a secondary class to differentiate the elements in the partial view from the elements in the original page, that way the ones in the original page won't get toggled back when the partial view gets loaded.
So the ones in your partial view would need the highlight class as well as that secondary differentiation class (class="lil partialViewClass"). Pass the class as the parameter to the function so each one will only toggle what it should.

How to .load() just a specific div from a page into a a target div, not the whole page

I have the following script that loads a page into a div and not just the targeted div. This is most evident when going back to my index and my header and footer are jammed into the <div id="contentspace"></div>.
I read on here somewhere that the div needs to be placed in it's own page prior to being displayed. Not sure which method would do that. Is this possible without hashtags Thanks for your help
<script type="text/javascript">
$(function() {
$('#header a').click(function() {
$('#contentspace').empty();
$("#contentspace").load(this.href, function(response){
console.log($('#content', response).html())
event.preventDefault();
});
});
});
</script>
The method .load() can load page fragment, simply by specifying a valid jquery selector next to the url.
$('myelement').load('page.html #content', function() {
...
});
Note that when loading page fragments, jquery will remove any SCRIPT element it might contain.
In you example, you would do:
$("#contentspace").load(this.href + ' #content', function(response){
...
});
Did you read the documentation at all? Take a look at the section titled Loading page fragments in the jQuery API for .load(). Essentially you just pass a selector along with the URL of the page to load as the first argument of the method.

jquery SlideToggle in dnn

I'm trying to make a infobox when i click the head the content slides down
but when i do it it just slides down and then up again.
It is in a ascx document and i need to use it on a dotnetnuke container
it works perfectly in a html file
here's the code
<script type="text/javascript">
$(document).ready(function () {
$('.head').click(function () {
$('.content').slideToggle();
});
});
</script>
or
$(document).ready(function () {
$('.textbox .content:eq(1)').hide();
$('.textbox .head').click(function () {
if ($(this).next('.content').is(':visible')) {
$(this).next('.content').slideUp();
} else {
$(this).next('.content').slideDown();
}
});
});
In the first example, you'll toggle all of the content areas if you have multiples of the same container on the page.
The second example looks like it should work, but, again, if you have multiple instances of the container, and that script is in the container itself, you'll register the handler multiple times. Try moving the script to an external file and referencing it in code, so it only gets included once. See DotNetNuke jquery script in container for an example of that.

Categories

Resources