I'm trying fancybox for the first time, I want to load the contents from an external html file. What happens though, is the ajax call ends up loading my entire index.html file into the fancybox window, not the much smaller html table I want to see loaded. Here's the html where I set it up:
<div class="card bg-light">
<img class="card-img img-fluid" src="/assets/O-Ride-Entry.jpg" alt="Card image">
<div class="card-body">
<h5 class="card-title text-center" >Cadet Programs</h5>
<p>blah blah blah
</p>
</div>
<div id="cadetPgmContainer"></div>
<div class="card-footer bg-transparent ">
Learn More
</div>
</div> <!-- card -->
and here is the javascript that is called when the user clicks 'Learn More':
$('#cadetPgmsCard').click( function() {
var href= '/static/cadetPgms.html';
console.log('going to open fancybox with ', href);
$.fancybox.open({
width: 400,
height: 400,
autosize: true,
href: href,
type: 'ajax'
});
console.log('back from fancybox');
});
I've even simplified the html file to:
<p>this is from cadetPgms.html</p>
But here is a screen shot of what actually happens:
It reloads the entire main page back into the fancybox. I stepped thru into the debugger right where ajax is called in fancybox.js, and the right URL is there in the options. What else can I try?
Thanks...
It looks like you are loading entire webpage into fancybox, and most likely the responsone of your .html file contains superfluous tags including <html>, <head>, etc. And that is not correct. ,
In such case, you have two options:
1) Filter your content using filter option so that only the content is displayed
2) Load file that contains plain data or use preprocessor like PHP to return correct content when loaded using ajax
I ended up not using js to load the fancybox content, and set it up in the main html file and invoked fancybox from there instead. Then I got everything to work fine.
Related
I've tried to use jQuery's load() function to change/load content without reloading. That works, but the problem is: the URL keeps the same!
Even if i use history.pushState() to change URL, that does not solve the problem. Example:
with the famous window.history.pushState("object or string", "Title", "/new-url");
With that, I am creating a "fake URL" for each page - If I try to enter the website with this changed URL again, i get an error, basically the link does not exist;
If I refresh the page, i lost all Ajax loaded content - I need to keep the content when refresh;
When I click to change Ajax loaded page, keeps putting new links next to the previous one, as in the image sent;
I want to get this result: https://reactjs.org/ - transiting the pages, they do not reload and the link changes, it is updatable and the link works separately - how do i do it?
3) printscreen of my page and its url
Important: index.html, about.html and contact.html are existing files that will load with the jquery function below.
HTML:
<div class="navbar">
<div class="content">
<div class="logo">My logo</div>
<ul class="pages">
<li id="index">Index</li>
<li id="about">About us</li>
<li id="contact">Contact</li>
</ul>
</div>
</div>
<section id="page">
<div class="content">
<!-- PAGES LOAD HERE -->
</div>
</section>
<div class="footer">
<div class="content">
--Footer-- All rights reserved.
</div>
</div>
JS:
$(document).ready(function () {
$('li').on("click", function () {
$pageName = $(this).attr('id');
$('#page .content').load(`pages/${$pageName}.html`);
$('li').removeClass('active'); //only to remove the selection of actual page in CSS
$(this).addClass('active'); //only to add the selection of actual page in CSS
window.history.pushState("object or string", "Title", `pages/${$pageName}.html`);
})
})
you're describing "routing" which is the idea of URLs matching the content that is being display.
In jquery i'd recommend googling: jquery router or javascript router
IF you're writing other languages you can google [language] router.
most recently google is bringing up https://www.npmjs.com/package/jqueryrouter which is now forwarding to https://github.com/scssyworks/silkrouter
Once you choose a router, read the docs and come back with more questions.
I'm setting up a web site rich of images.
I've designed it as a landing page: all content has to be on the main HTML page, without flow in others, actually there is the only index.html.
This will be the official website of a Theater, the images are all related to their shows.
To estimate the number of images:
40 shows an almost 40 pics per show (About 600kb per Image)
Almost 1gb of pictures in the same page!
Every show is represented with an image and when you click the Show image a Modal is opened showing the related pics in a grid and information about it.
I'm using Bootstrap 4, Jquery and CSS.
The problem is: if I add all the modals (with the pics in it) to HTML page my website get very lazy and doesn't ** load properly**.
I'm searching a way to load dynamically the pics every time you click on the show, avoiding to load the Dom with ALL the pictures from the first moment.
I've tried with Jquery injection, but is very hard to handle when the modal is open and when modal is closed and I don't think that is a proper and strict way to code.
I was thinking about a PHP server manipulation of images.
Php elaborate and minimize the images to make thumbnail so when images are seen in a grid they are not in the full size, and only when images are clicked they shown in full size (with lightbox.js).
But I'm a complete noob with PHP, and I didn't find an easy tutorial.
I'm opened to any solution you think I can implement, mostly to those who care about SEO optimization and faster loading time for client!
<!-- MODAL EXAMPLE -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-full " data-dismiss="modal">
<div class="modal-content mx-auto">
<div class="modal-body">
<div class="column mx-auto">
<div class="sidebar-box">
<h2 class="title">SHOW TITLE</h2>
<h2 class="subtitle"> SHOW SUBTITLE</h2>
<p class="middle">MIDDLE INFORMATION</p>
<p class="description">SHOW DESCRIPTION</p>
</div>
</div>
<div class="column mx-auto">
<!-- THERE WILL BE ALL THE IMAGES IN A GRID-->
<div class="row justify-content-center">
<a href="stages/alesi/alesi1.JPG" data-title="Fotografia ©" data-lightbox="alesi">
<img src="stages/alesi/alesi1.JPG" alt="" />
</a>
<a href="stages/alesi/alesi2.JPG" data-title="Fotografia ©" data-lightbox="alesi">
<img src="stages/alesi/alesi2.JPG" alt="" />
</a>
<a href="stages/alesi/alesi3.JPG" data-title="Fotografia ©" data-lightbox="alesi">
<img src="stages/alesi/alesi3.JPG" alt="" />
</a>
</div>
</div>
</div>
</div>
</div>
</div>
Thank you very much to all stack overflow community!
One way to do it is with AJAX, yeah, you can have the content of each modal into a different HTML/PHP file, and on click on the modal to make an AJAX request, and putting the specific modal content(html file) into the page.
So, basically, you will have the whole <div class="modal-body"> div in a different HTML file, and on modal click you will have something like that
$("the_modal").click(function(){
$.ajax({url: "modal1.html", success: function(result){
$("#myModal modal-content").append(result);
}});
});
Of course, you can put data attributes on the modal and use them in the AJAX, so it will work for all the modal across the website.
The other thing that will help a lot is optimizing the images, reducing the size, the quality.
If your main problem is the amount of images that will have to be loaded delaying your page so I suggest that you try to implement images lazy-loading. This is going to enhance the performance of your website since your images will load only when they are shown in the viewport.
There is a jQuery plugin you can use for that: jQuery.Lazy()
You can use this link to refer how to load dynamic data in a single bootstrap modal.
https://getbootstrap.com/docs/4.3/components/modal/#varying-modal-content
If you have the show data in database or JSON file, you can then pass the id of the show which is clicked in the data attribute as given in above example.
Then using modal event show.bs.modal, you can fire an ajax call, which will populate the required data in the .modal-body and on close you can clear the data from the modal.
I would advise against loading 40pics x 600k by default. You need to be thinking about mobile users.
I would use a gallery script (I recommend Photo Swipe) and a request to a server-side script returning a json that will be used to create the gallery only on demand.
Check this page: https://photoswipe.com/documentation/custom-html-in-slides.html
I have created a jQuery Dialog for storing a hidden image, which will only be triggered by clicking a link. Some of the codes are as followed:
<div id="dialogdialog" style="background-color: white;">
<div>
<div style="clear: right">
<a href="#" class="closeDialogButton">
<div id="fitClose" class='sprite x' style="float:right;"></div></a>
</div>
</div>
<div>
<div id="fitLogoBlack" class='sprite black-logo'></div>
<br/><br/>
<img id="fitTitle" src="img/fitguide_title.jpg">
<img id="fitLogoBlue" src="img/blue.png">
</div>
<div>
<img src="img/topbanner01.jpg">
<br/>
<img src="img/slim02.jpg">
</div>
</div>
<a class="fit-guide" href="#fit-guide" target="_self" rel="nofollow" id="fitguidePic">Fit Guide</a>
<script>
$(function() {
$("#dialogdialog").dialog({
width: 900,
border: 0,
autoOpen: false,
modal: true,
resizeable: false,
dialogClass:"myClass"
});
$("#fitguidePic").on("click", function() {
$("#dialogdialog").dialog("open");
});
});
$('.closeDialogButton').click(function(e){
e.preventDefault();
$('#dialogdialog').dialog('close');
})
</script>
And the codes are working, the image can be hidden until I clicked on the link, however, occasionally when I refresh my page, I will see the hidden content appeared on the page for few seconds, but after the whole page is fully loaded, it will be hidden again. But this situation does not happened for every refresh.
I have no idea what this problem is caused. How can I stop the image popping up when refreshing? Thanks!
Add this to your CSS:
#dialogdialog {
display: none;
}
Because displaying of the page in the browser doesn't wait for Javascript to be fully loaded the dialog is sometimes visible, because it is visible by default. jQuery will later 'overwrite' this initial setting by attaching CSS directly to the element.
How can I stop the image popping up when refreshing?
By using vanilla js (raw js). Why ?
I have no idea what this problem is caused.
This is because jQuery (if properly set) is loaded only after the whole document has loaded. So when you refresh the image appear first and then the code hidding it is loaded after that. Anytime there is a delay and the loading is slow, you will see the picture before it is hidden if using jQuery.
Alt solution : you can load jQuery without waiting for the document to fully load but your code might break and this is generally a really bad idea. jQuery works only on whole documents.
display: none; on #dialogdialog
I have a photo gallery on a website: http://www.firstaidlifeline.co.uk/gallery/.
However, no images are displayed on the website.
I believe the problem lies in the CSS (or JS), since the HTML looks good to me.
The HTML looks as follows:
<div id="flickrGal0" class="justified-gallery">
<a href="https://farm6.staticflickr.com/5813/22733190139_f81bfe7a9b_b.jpg" rel="flickrGal0" title="20130213_153547"><img alt="20130213_153547" src="https://farm6.static.flickr.com/5813/22733190139_f81bfe7a9b_m.jpg" data-safe-src="https://farm6.static.flickr.com/5813/22733190139_f81bfe7a9b_m.jpg">
<div class="caption">
<div class="photo-title photo-title-with-desc">20130213_153547</div>
</div>
</a>
...
...
...
</div>
The html by itself works elsewhere. So I think there is a conflict somewhere in the JS or CSS somewhere however, I'm unsure exactly where.
I looked up the source code, and the library. justifiedGallery.js file isn't loaded in the page. Function fjgwppInit_flickrGal0() that calls justifiedGallery() isn't called; this explains why the console doesn't fire up any error. Load justifiedGallery.js in the <head>
Put
jQuery(function(){
fjgwppInit_flickrGal0();
};
Somewhere on your page.
Edit
It seems the gallery is generated by a plugin, I presume you should play the settings, or, the plugin could be damaged. Plugin homepage
I'm having a framework7 app and I have a requirement to load an external page into the app. It means the navigation bar and all should remain in the top but I should be able to show the content of the external url within the body. More like inapp browser.
I tried with iFrame but it doesn't work properly for https based urls. Is there any way of doing it?
Also note that if I add the external class into the anchor tag then the page opens in new window. Not inside the app.
Use AJAX to insert html into your page.
Using Javascript you can load an 'external' page (EXTERNALPAGE.php) into a <div> of you choosing (PAGEPlaceholder).
Below is a summary of suggested code, this is NOT a working example...
Your HTML could look something like this:
<div data-page="PAGENAME" class="page navbar-through toolbar-through">
<div class="navbar ">
<div class="navbar-inner">
<div class="left"></div>
<div class="center sliding">Page Title</div>
<div class="right"></div>
</div>
</div>
<div class="page-content ">
<div id="PAGEPlaceHolder"></div>
</div>
...
And the JS could look something like this:
myApp.onPageInit('PAGENAME', function (page) {
$$.get('EXTERNALPAGE.php', {}, function (data) {
$$('#PAGEPlaceHolder').html(data);
});
});
I tried using $$.get but it was including their css which messed up my stuff so I ended up using an iframe to isolate it in a popup.
$$(document).on('click', '.open-popup', function (e) {
var link = this.data("url");
var iframe = '<iframe width="100%" style="height: 100em;" src="http://cors.io/?u=' + link + '" frameborder="0"></iframe>';
$$('.popup-body').html("Loading...");
$$('.popup-body').html(iframe);
app.popup('.popup');
});