I have a page for a real estate website with a list of all of the companies properties. Within each listing, there is a slider with ~50 images of that property.
DEMO: http://lexis250.github.io/groupecopley/properties/
The site is built with Jekyll and Foundation.
The problem is that this page is extremely heavy to load. I would like to implement a lazy load so the images are only loaded when they are requested. What is the most efficient way to go about doing this?
Code base on github:
https://github.com/lexis250/groupecopley
If I need to provide more information please let me know. I am a beginner.
You can implement this using a combination of pagination and lazy loading. You can place 5 or 10 sliders on a page. Then each slider can use lazy loading to load images. As suggested in the comments as well look into slick here: http://kenwheeler.github.io/slick/
Scroll down on the link you will see a feature for lazy loading along with code.
Edit:
You can also look into image compression and optimizing websites by gzip compression. Gzip compression is explained here: http://betterexplained.com/articles/how-to-optimize-your-site-with-gzip-compression/
Related
Want to build a video site like YouTube or peer tube but on my lan completely private, basically I want to pretend my kids are online when their not... plus a good project to learn.
A video based website would be easy to make. You could do this quite easily with a few Wagtail Pages, uploading videos as Documents and using a DocumentChooserPanel to select a video on each page.
To get started you'll want to start in two places:
The wagtail docs, available at http://docs.wagtail.io/en/latest/getting_started/tutorial.html, and
For additional tutorials https://wagtail.io/course/
Take it slow at first, get your virtual environment setup. Then move on to creating your first Wagtail Home Page and adding a few custom fields, then make them show up in the home_page.html template.
For future reference, when you ask questions on StackOverflow (or anywhere else) make sure you add more detail to your question. Including what you've done/tried so far, your end goal, or any problematic code you're working on will help you get answers faster and it'll generate better answers than mine.
I recently attended a lecture where the speaker's slide show had a header through the entire presentation showing the high level grouping of the slides and with a dot representing how far through the overall presentation we were. I liked this style a lot and am now trying to emulate it but cannot seem to find any tutorials or even come up with the right keywords to search on this. is there a specific name for this and how do i accomplish this in PowerPoint or Google slides preferably.
Try searching on
powerpoint breadcrumb
i corresponded with the presenter who i was trying to emulate and am going to consider this case closed because they used beamer and latex to make the slides which is how the header with "section dots" was generated. in case anyone is wondering they used the theme warsaw and the final result should look something like this example: http://www.latex-community.org/forum/viewtopic.php?f=47&t=23331 but with all the sections and section dots being there and cycled through as you click through your presentation.
I made a little PowerPoint Add- In to generate a quick Breadcrumb header for your slides. You still have to set the colors, but it's really fast if you don't want to use the Master:
Simple Breadcrumb Generator For PowerPoint
I was asked to improve the list admin for the medialibrary of a django website (built with FeinCMS) where images are very important. There should be only images in the list admin, and they should be many, and dense. Furthermore it should still be possible to mark images for bulk operations. So, I'm seeking for roughly what the Wordpress Media Library offers (sorry, collegues).
I'm sure that this problem is quiet common. However, I cannot find a plugin offering all the functionality I need, including the template, the static files and a place for settings. Is there such a plugin?
https://github.com/20tab/twentytab-customadmin
Should be what you are looking for, you can set icons for every section, and lot of other customizations.
I have a django app and I would like to display some graphical data visualization to my users. I am looking for an easy-to-use package that would allow me to add graphs and widgets.
The kind of widget I want to build is a kind of speedometer dial that is red at one end and green at the other. As a user completes their job over the day, the graphic/widget adjusts itself. The dial moves from red to green.
I also want an S-curve graphic that shows the cumulative amount of work accomplished against planned. That is kind of an x/y line plot.
My question are: How easy is this to implement? Are there any add-ins libraries or packages that do this already? I am trying to keep my entire application open-source. I've seen a couple subscription services that do this type of thing, but I can't stomach the cost.
I don't mind using ajax or jquery to implement such a thing, but I would like the most elegant and maintainable solution.
Any advice or examples on how to tackle this project?
There are lots of good javascript libraries these days, but all require some effort to learn how to use. I have not found one that really is easy to use, I guess because everyone wants something different. My general experience has been the more effort you put into learning them, the more you get out.
Google has gauges: http://code.google.com/apis/chart/interactive/docs/gallery/gauge.html
Also
http://www.flotcharts.org/
http://philogb.github.com/jit/
http://www.highcharts.com/
http://www.jqplot.com/
Or really take control:
http://mbostock.github.com/protovis/
As first, see the following grid (https://www.djangopackages.com/grids/g/dashboard-applications/) on djangopackages.
Not sure if that's exactly what's asked for, but you might take a look at django-dash (https://pypi.python.org/pypi/django-dash).
It allows each user to make his own dashboard (from plugins available). Those dashboards can be made public.
Some screenshots (http://pythonhosted.org/django-dash/#screenshots).
It's modular and plugin based, so you need to make a plugin and widgets for every specific feature (in this particular case - the speedometer plugin and widgets for it). Each plugin/widget can include own JS/CSS when being rendered.
See the following chart usage examples:
D3.js integration examples (https://github.com/barseghyanartur/django-dash/tree/master/example/example/d3_samples).
Polychart2.js integration example (https://github.com/barseghyanartur/django-dash/blob/master/example/example/bar/).
protovis is no longer under active development, but they started a new poject: http://d3js.org/
You may choose from these packages:
https://www.djangopackages.com/search/?q=dash
I am trying to make a few interactive graph visualisations in my Django web application using Python. I found Graphviz and was able to output a static graph (as a .png image) on my application using Pydot (Python interface to Graphviz's dot language).
However, I am looking to make my graphs more interactive, like being able to highlight nodes when passing my mouse over it, making the nodes click-able, dragging the nodes to a different location and zooming on the graph.
Is there a way I could do this in Graphviz? Or in general is there way to make an interactive graph for my Django application without having to use Flash? I don't want to use flash since I'm not that familiar with it and also since I want to visualise a fairly large dataset.
Try The Javascript Infovis Toolkit. It is all implemented in a browser canvas, so no Flash is needed, only a decent browser with support for the <canvas> tag. Graph visualization examples are here, here and here, other demos are here.
There is Canviz (source). However, nodes are not yet clickable (they were in an older version that used image maps. The code base has changed and now the rendering is happenning client side using javascript, which is why clickable links is not yet re enabled.
This is the best I found, however they are plenty of others.
mxGraph (Not free)
You can use D3.js for graph visualization (see here for examples of graph visualizations in D3js, and look at How to Make an Interactive Network Visualization).
For back-end (if it is necessary to have something more than just a json file to represent the graph - i.e. if it is large), then you can use a Python module for graphs, NetworkX.
Side note, here is my simple interactive graph visualization example:
You can do something like this very simply just with DOT and HTML.
Generate client-side maps and overlay them over your PNG images. (Insert the map code into the HTML page.)
dot test.dot -Tpng -o test.png -Tcmapx -o test.map
SVG exports are directly clickable.
It seems like an approach that fits what you are trying to do might be to use svg in the browser an/or javascript. I think most of the modern browsers support SVG and would allow you to do some pretty cool interactive graphs. The server could provide a json feed of the datapoints needed to render the graph. I don't know off hand the tools that are available, but I've seen some pretty cool graph demos constructed without flash through client-side approaches.
As an alternative, you could pre-render a bunch of graph images that the user would likely view and then just fetch those as the user interacts with the graph. This might work if the graphs don't change that frequently and if the number of alterations that the user would make is small, but you'd have to re-render every time the graph changes.
I've did what you are trying to do not too long ago. The context was visualizing a gnarly SalesForce schema.
First thing, graphviz is only good for plotting, not really for drawing. You can generate SVG, but I could not get it to work with I.E. after a considerable of (what turned out to be fruitless) effort.
I DID find this Java Applet ZGRViewer to suffice, and while applets feel a bit dated for my taste, it worked very well cross browser.
I basically hand coded a process invoking service that generated the dot files and ran them thought (dotty, is think?) - the visulazation applet reads the native dot file format.
I also came accross something that I thought about for a V2 (which never happened) - it is part of the AJAX control toolkit - Seadragon.
If you want to see the code in ASP.NET, I can post it.