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
Related
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.
I need help with twitter's bootstrap accordion. I need it to where when i click the accordion title, the title opens up something i href it to.
<div class="container">
<p class="max-width-700 lead">testing</p>
<div class="col-md-6 col-sm-6 mb-sm-30">
<div class="accordion">
<div class="accordion-title">
2014 (Opening)
</div>
<div class="accordion-title">
2015
</div>
<div class="accordion-content">
</div>
Something like this, so when i click 2014, it opens up a document or file i have linked it to
You need to open file inside the accordion tab or need open file only like open pdf file an other window ?
In bootstrap you can't open link until you remove its according function
(1)
Use a boostrap-collapse.js event. See http://getbootstrap.com/2.3.2/javascript.html#collapse
Give each title a unique id and then add the following js to the end of your HTML.
$('#myItem1').on('show', function () {
window.location.href = '1.0.pdf';
})
(2)
The accordion is specifically designed to open an underlying hidden content. Using it to open external files is not expected behaviour - I would strongly recommend not using this type of UX - some users will see this as clickbait.
(3)
The .accordion class comes from Boostrap 2(?) 2 is no longer supported.
So, after looking at many jquery modal plugins, I like the PopEasy ( http://thomasgrauer.com/popeasy/ ), but I copy and paste the provided code into a page on my server and no-workey.
Do the same with jsFiddle, same problem. The overlay fires, but the modal doesn't pop up. I'm sure that I'm doing one simple thing wrong.
http://jsfiddle.net/birchy/Kkw2L/5/
<a class="modalLink" href="#">Click Me
<div class="overlay"></div>
<div class="modal">
Close Me
content here
</div>
It appears to be a missing anchor close tag in the author's code.
I'm looking for a solution, in which div content changes on page load, randomly. Much like a JavaScript image on page load. I have made further notes in the code below.
I could do a randomize the content like images with JavaScript on page load, but here it's divs and I'm not sure how to change content inside them.
<div class="row BSlots">
<div class="Grid_4 fl">
/* This would be the code which would change */
/* For example once it would be <div class="hello"><p>Hi</p></div> and the other <iframe="Link"/> */
</div>
<div class="Grid_4 fr">
<script>Widget2(); /* Don't mind this, loading an actual JS image randomizer here */</script>
</div>
</div>
Can this be achieved without using JS? If not, I'd appreciate a basic example which I could fiddle with :)
Yes it could be achieved without Javascript. It depends on which serverside-technology you use. You could create a template and insert serverside ransom image-tags.
It is possible too, to do it via javascript.
If you want to use jQuery, you could do something like:
$(function(){
$(".Grid_4 fl").html(generateRandomImageHtml());
});
I have 3 different types of modal windows to handle different events. They popup to handle either:
1) Warnings, i.e. "hey, if you leave the page you will lose your work" kind of messages.
2) Dynamic data from a form the user previously filled out, i.e. "you are about to create a page with DataX: Data X, DataY: DataY, Date: March 28, 2012.
3) Form for the user to fill out.
I was originally trying to handle all 3 of the above scenarios with one set of html/css/javascript, just passing in data and modifying divs depending on situation. As I have expanded things, i'm noticing things being harder to maintain cleanly without being sloppy about it. I have a few questions which i'll list after I walk through how things are now.
Simplified HTML for modal popups:
<div id ="popup" style="display:none;">
<div class="modal-container">
<div class="modal">
<div class="modal-header">
<a class="close" href="# " title="Press Esc to close"><div id="close-label" title="Press Esc to close">Close</div></a>
<span id="top-header">WARNING</span>
</div>
<div class="modal-body">
<div class="modal-subhead">
<img class="subhead-icon" border="0" src="">
<span id= "header">WARNING</span>
</div>
<div class="modal-message"><span>If you leave this page, you will lose unsaved changed.</span></div>
<div class="modal-input-first">
<div class="modal-label"></div>
<div id="modal-input"></div>
</div>
<div class="modal-input-second">
<div class="modal-label"></div>
<div id="modal-input"></div>
</div>
<div class="modal-footer">
<a class="secondary" href="#">Cancel</a>
<span id = "button-secondary-label">or</span>
<span class="btn_container">
<span class="btn_left"></span>
<span class="btn_center">Continue</span>
<span class="btn_right"></span>
</span>
</div>
</div>
Right now this is located in a separate file with it's css and javascript and is loaded when the page is loaded.
In the main file I am changing the popup depending on what triggered the popup, just using jquery as such:
$('.modal-message').html('New Message');
$('.modal-subhead #header').text('New header');
The dynamic data is filled in similarly after first making the ajax request to get the data.
As I said, as things grow, i'm having to change a lot of this, and it's starting to feel sloppy. Especially as i'm having to make pixel perfect changes to the css for individual elements. Would it be best to have 3 completely separate sets of html to handle these? Where is the best place for this to live, is the separate file approach?
Is it better to keep adding separate elements as I need specific ones for certain instances, like so:
<div class="modal-input-specific-thing">
<div class="modal-label"></div>
<div id="modal-input"></div>
<div id="modal-input-2"></div>
</div>
Or to use jquery to change the structure of the html on the fly?
var new_input = 'modal-input' + count;
$('#modal-input').attr('id', new_input);
Is there a better method for pushing only the elements needed to a popup like this?
If I had 10-12 scenarios, which is possible as I keep expanding this. Is there a big enough performance hit to parsing 12 different sets of html/css every time page is loaded vs doing what i'm trying to do now...Making a generic/abstracted popup window, and push elements/data to it as the user needs?
Thanks!
I should do this with jQuery and jQuery UI. The jQuery UI has a real nice popup function called dialog. ( http://jqueryui.com/demos/dialog/ )
A working version that reconstruct your situation you will see here. ( http://jsfiddle.net/7GVmz/ )
There are a lot of options you can add so as buttons, callbacks on opening and closing. You can read all of it in the documentation on the jqueryui website ( http://jqueryui.com/demos/dialog/#option-disabled )
Html
<div id="popup-1" title="popup-1">
Hello World
</div>
<div id="popup-2" title="popup-2">
Hello World
</div>
<div id="popup-3" title="popup-3">
Hello World
</div>
JS
$(document).ready(function() {
$('#popup-1').dialog();
$('#popup-2').dialog();
$('#popup-3').dialog();
});
Note
Its important that you load the jquery library and the jquery ui library.
I use SweetAlert for all my JavaScript alerts, it's a Better JavaScript Popup Box than the default and is really simple to use.
swal({<br>
title: "Are you sure you want to leave?",<br>
text: "You have unsaved changes!",<br>
type: "warning",<br>
showCancelButton: true,<br>
confirmButtonClass: "btn-danger",<br>
confirmButtonText: "Yes, Exit!",<br>
closeOnConfirm: false<br>
},<br>
function(){<br>
swal("Deleted!", "Your imaginary file has been deleted.", "success");<br>
});<br>
A full tutorial is here - https://kodesmart.com/kode/javascript-replacement-alert-box