I'm using Galleria.js to create a background slideshow in a site I'm working on, and I'd like to be able to serve different resolutions to different devices. I'm using adaptive-images.php which is generating the needed files, but it seems as though galleria is still pulling the original full resolution ones no matter what. Is there a way to make this work, or perhaps an alternative solution like picturefill.js?
Thanks!
I'd love to see this, too. Unfortunately this could only be done in Javascript - not in PHP. Probably it would be possible to use picturefill.js as a Galleria plugin but unfortunately I don't know enough Javascript to do this.
Explanation: Galleria dynamically looks for the image referenced and shows that one. Something is needed to tell Galleria to use a different image source (depending on the screen size e.g.). To do this the method that picturefill.js uses (replacing src by srcset) would be perfect but it has to be integrated as a function in Galleria.
It's probably not too hard for someone with a good knowledge of Javascript - anybody?
This recently has also been asked at Galleria's support: http://support.galleria.io/discussions/questions/18040-compatible-with-picturefilljs
However Galleria provides a somewhat useful functionality out of the box: You can use three different sizes of an image by serving markup like this:
<div class="galleria">
<img src="/img/thumb1.jpg" data-big="/img/big1.jpg" data-title="My title" data-description="My description">
<img src="/img/thumb2.jpg" data-big="/img/big2.jpg" data-title="Another title" data-description="My description">
</div>
The 'data-big' size will be shown in fullscreen mode out of the box - not depending on screen size.
Perhaps it's a workaround until something more useful comes up.
Everything truly adaptive needs a Javascript plugin for Galleria.
Related
I'm considering writing my own image file format for my site. Why? Well, the site is going to include comics that only subscribers can read, and I want to make it a little difficult for someone to drag and drop the image and spread it around. Is there a better way of doing this, or is this a way I should investigate further? If so, how would one go about doing this?
I've read there could be a way in PHP with doing this, but unsure how to go about it if this is a good solution.
It's impossible to completely prevent your images from being stolen, but you can make the process harder.
The following method will make the real image unreachable unless checked from the source. You can use the original image as a background & put a transparent-blank file over it that matches the size of the real image.
Example:
<div id="image1" style="background-image: url(originalImage.jpg);">
<img src="blank.gif" height="250px" width="300px">
</div>
So, when the image is right-clicked, it will be the blank.gif that can be reached.
View this post for some other ideas.
An alternative solution would be to use PHP's GD Library. Using this method, you can add a watermark on all your images.
Hope this helps!
Im currently building a practice responsive website, what I am doing is taking an exising website, building it up using twitter bootsrap js and css, meaning it will be fully responsive for mobile.
The issue is that there are some large carousels and images on the site. Ideally I would like to just completely remove certain elements, like a carousel for instance, and instead have the options within the carousel as a standard list menu.
It seems the main option is display:none based on media queries, but I am starting to foresee that I will run into big problems for loading time if the entire desktop site is still going to be loaded on the mobile, only elements hidden.
Are there ways to completely exclude html based on browser size? If anyone has any good links or articles that would be great. Or even just opinions, on whether there is actually need to exclude html or not.
Thank you
First off it is really good to see that although you're talking about display:none; you actually still want to display the content without the bells and whistles of the image. Well done you.
The next thing I would look at is if you don't want to load images for a mobile then why are you adding it for the larger sites. If the image isn't providing a function, assisting in explaining the content better, then why not just drop it for the desktop size as well?
If in fact it does help tell a story then you can include the images and some of the popular image services like adaptive images, hiSRC, or PictureFill which will serve the mobile version of the image first and replace with a larger image at higher viewports (but remember, there's no bandwidth test).
Finally, if you do want to serve some different content, then take the advice of fire around including more content with ajax. The South Street toolbox from Filament group can help you out, pay particular attention to the AjaxInclude pattern (it also has a link to the picturefill).
You could consider storing heavy data JSON-encoded, and then creating elements and loading them on demand like so
var heavyImage = new Image();
heavyImage.src=imageList[id];
Then you can append image element to a desired block. From my experience with mobiles this is more robust than requesting <img> via AJAX, since AJAX could be pretty slow sometimes.
You may also 'prefetch' images with this method (like 2-3 adjacent to visible at the moment), thus improving UX.
You could pull in the heavy elements via AJAX so they wouldn't sit on the page initially, making it load faster. You could decide to do the AJAX call only if the screen size is larger than X.
If you want you can use visibility:hidden, or if you use jQuery you can use
$(element).remove() //to remove completely
$(element).hide() //to hide
$(element).fadeOut(1) //to fadeout
I have designed a website site.
I would like to know if it is possible to make pages in my site re-size to suite the visitors' monitor resolution.
For example, I'm using my computer with 1024x768 resolution.
If I change my resolution to 800x600 I want my site to re-size to fit the screen resolution of 800x600.
Yes, it's called responsive design. Specifically look at media queries.
This is called "dynamic" or "fluid" width, as opposed to setting a "fixed" width on the page. This is usually done with CSS, as opposed to PHP or JavaScript. Do some research on the subject on Google (search for "dynamic width web pages"). I found this article.
You don't want the resolution, since not everybody uses their browser fullscreen; you want the document size. There are ways to get that in plain javascript, but your best bet is to use a library like jquery, since that helps ensure your technique works cross-browser:
http://api.jquery.com/width/
But don't do that unless there is no other way to do what you want; first try using percentages in your CSS. Setting sizes with js is messy.
this is some key word for what your search
css grid system responsive/adaptative web
some links
http://net.tutsplus.com/tutorials/design-tutorials/quick-tip-different-layouts-for-different-widths/
http://speakerdeck.com/u/nathansmith/p/960-grid-system
http://www.emblematiq.com/lab/my-adaptive-grid/
http://webdesignledger.com/resources/responsive-web-design-templates-and-frameworks
generator
I am looking for a way to cat a part of an image, using another image as a mask.
I don't know if this is at all possible using web technologies. I am willing of using libraries (jquery, php, javascript) or anything available on the market that does just that.
In general, I want to create themes that use resources that I don't have to cut in order to make them in different shapes (rectangles, circles etc). I onlywant to be able to apply a mask to them on the fly.
I am aware of ImageMagick® but cant figure out a way on how to use it to have such results without making my code ugly.
If you don't have a clue on what masking is, here's a link.
If I understand well you're talking about juxtaposing images. If so, you can encapsulate a div into another, like this:
<div id="div1">
<div id="<div2">
</div>
</div>
And then put your image as a CSS background for div2 and the mask for div1.
I have been looking at the YouTube Insight function and want to learn how their chart PNGs are created.
If you have a video and look at the statistics, you get a bunch of PNG-images that in many ways can be considered interactive. Look at the image below.
As far as I can tell, everything consist of PNG images. I expected to see flash elements, but I do not.
For example: The slider where you chose date range can be dragged, clicked and the image updates dynamically without the page reloading. I am thinking, maybe ajax-style calls are made that replaces the image? It is totally seamless as far as I can see.
Another example: You can chose country by clicking the world map. The images are instantly updated to display the demography chosen. Are something simple as image maps used to catch the clicks?
Google/YouTube Insight screenshot http://www.mattis.st/images/google_insight.png
My questions are:
1). How do you create PNG images with information from a database? I prefer to use PHP so if you like tweak your answers in that direction. I am not looking for any third part "plugins", other than perhaps jQuery.
2). How are they creating the "interactivity" on their PNGs?
The PNGs are only clickeable and interactive when you check Google Insight on your own videos. Checking normal statistics for a video only loads static PNGs.
I know about Open Flash Chart and the likes, however I want to create my own code to learn as much as possible and be able to tailor the code for my use.
I truly appreciate any answers. Please ask for clarification if I am unclear.
EDIT: I examined the Google/YouTube source code further and found one of the images to be:
<img src="http://chart.apis.google.com/chart?chs=422x110&cht=lc&chco=808080&chd=s:At9j0jSUPJKMM&chls=1&chm=B,F7F7F7,0,0,0%7Ch,CCCCCC,0,-0.5,1" class="GDYWU0EBBG">
Which looks like this (saved from my valid session):
Image from source http://www.mattis.st/images/google_insight2.png
As you can see, this is the background PNG image without the bars and the range selection overlay.
<div id="GEOMAP_map" style="">
<embed type="application/x-shockwave-flash"
src="/insights/search/resources/544738731-geomap.swf"
width="500" height="310" style="undefined" id="geomap"
name="geomap" bgcolor="#FFFFFF" quality="high"
allowscriptaccess="always" wmode="opaque" flashvars="(...)"></div>
Looks like flash to me.
AFAIK you will always need a plugin to generate images from PHP (be it GD or ImageMagick). I don't have any experience with ImageMagick, but I know GD isn't the quickest of cats.. I wouldn't count on it to generate your charts on-the-fly!
And as suggested by justkt, you could use any js library to create interactivity. No fancy flash required :)
After thinking about it, examining the source even more, and considering the replies you guys have made I have come to the following conclusions:
1). The PNG's are generated with the Google Charts API (thanks Tom!).
2). The interactivity is created with nifty javascript programming. The seamlessness of it is hugely impressive, and I will try to implement something alike in my project.
Thank you for your replies and your time.