I have a map that is 40x50 that shows when the visitor comes to the website, i would like the visitor to click the map which puts in topmost actual size 400x500 and everything beneath is blacked out, when they click off the pic it will simply vanish.
I have seem it happen in many galleries but can't seem to find one i can recode and don't even know what the actual process of doing this is called.
I believe the word you're looking for is lightbox.
See this: http://lokeshdhakar.com/projects/lightbox2/
By the way, tags are for tagging what languages you are using. Appropriate tags for this post would probably be html and javascript. The image tag is alright, but without context, it's difficult to figure out how your are trying to implement it.
Related
So this is an interesting one. I did a test of using the clown car technique for showing responsive images via svgs loaded via an object tag because I really like the approach.
Now this works all fine, except when you have a few of them on one page with the cache normally activated, you leave the site to go to anywhere else in the interwebs and then press the back button - suddenly all images are mixed up, even though the code is still correct, ie:
object 1 loads svg that shows image from object 3
object 3 loads svg that shows image from object 5
etc.
Totally random and I just can't explain how this can happen. And it only ever happens when I go back to the page via the back command of the browser (chrome).
Has anyone experienced anything like this before??
I guess I'll stick to good old normal images for now...
Just ran into the same bug. And so did Google!
I suppose we'll have to use inline SVGs as loading through <img> tags aren't a possibility for me.
If you only have a single page app, you could add target="_blank" to your <a> tags to ensure the back button will come into play far less.
Ey. I've seen the other post about Lightbox gallery effect for Flex, but after having played around with it I cant seem to get it to work 100% (The image is as small as the thumb, and I cant make it bigger). And this also lacks some functionality I'd like to have.
So, one example would be, of course, this: http://lokeshdhakar.com/projects/lightbox2/
If you click any image on the image set you can swap between them with an arrow. This is what I'd like to have.
Also, it would be nice if it was possible to display the thumbnails for the other images in the same set under the bigger picture(when one image is already clicked).
I've tried to search for components like this, but I cant seem to find any other.
If any of you know of any nice components or snippets of code for this kind of effect then please let me know! =)
Kind regards,
Stian Berg Larsen
EDIT:
So I've searched around and tried a number of examples, but I cant seem to get any of them to work. There is always an error, and none of the examples are exactly what I want.
I simply need a way to show images like Lightbox. With a prev/next arrow and maybe a close button. Nothing more than that. How would I go about making this, or use an existing component?
Im using a TileGroup to hold all my thumbs (so that they will fill out the width of the Group with more images if there are room for it). If it's possible to generate this list of thumbnails dynamically too then that would be great, but basically what I need is to show images with a Lightbox style when I click them.
Thanks! =)
I ended up just making my own lightbox effect. :)
Created an Actionscript class (based on Group) and added image loading functionality, prev/next/close buttons and borders and such. Works like a charm :)
I dont know what kind of success i'll have from this post but struggling at the moment to get a reply on the rockettheme forums.
I have downloaded this template (Kinetic) from Rockettheme.com (demo below;)
http://demo.rockettheme.com/?template=kinetic
I have changed it to come out looking like the link below;
http://evolve.gen.nz/
However im really struggling to differentiate the footer from the rest of the website. Im looking at changing it to a light grey however I cannot make it stretch right across the website as the footer is located in the container and stops at either edge of the container.
is there anyway to make a footer colour go right across the page?
(the same as the following website, if you go down to the bottom of the page and you will see a dark grey, charcoal colour)
http://www.colmanweb.co.nz/websites/refuge/
Any ideas on how I could get this achieved?
Thanks
You just need to edit the index.php file of the template, should be at templates/kinetic/index.php roughly. If you head to the bottom, you will find a div with rt-footer. You will want to pull this entire div statement out and paste it outside of the div with an id rt-surround. Your best bet is to find rt-debug and paste it just above.
I run a lot of sites off the base gantry template from Rocket Theme and do this type of thing often, so it should work.
Two issues you may run into. If you don't get the right closing div tag, you can get some weird output if the divs aren't closed properly. So be careful and use the indentation to help you.
Second, there may be some css styling that is specific to the old heirarchy. I doubt it in this case, but it can happen. You may have to fix some of the css styling.
I've been looking around to see if there exists a good way to prevent viewers from using their right click options to download images that I upload to my website.
I know that people can look at the image url in the page source, and was wondering if you suggest a way to prevent them being taken, by disabling the save image option.
This is an unsolvable problem.
As long as you actually want people to see the images, you cannot prevent them from saving them via a number of methods (e.g. screenshots). All measures you might think of will just annoy your users, without actually preventing them from doing what they want anyway. Also consider that the people watching those images will have some interest in them (otherwise they would not watch them in the first place), so there we already have a motive for them to keep a copy.
The only way to reliably prevent people from saving the images is to never let them copy them onto their computers in the first place (and remember: showing something on another computer always entails making a copy).
One solution could be to invite people into a place where they can view the image on a screen which you control, and not let them take any pictures. Think of modern cinemas where security people with night sights watch the spectators and pull out those who might have been handling any camera like device.
If you want to make it even more difficult, do not use an IMG tag. Instead, define the image using CSS with the property 'background-image'. To make it even more tricky, define that property at runtime using JavaScript that was placed on the page using base64 encoding.
You can try this...
onload=function(){
document.oncontextmenu=function(){return false;}
}
This will disallow the operation of the context (right mouse button click) menu...
If a user knows what they're doing they can get around this, though.
I suggest not doing this. It's annoying and you're not actually protecting yourself.
If you must, jQuery makes it pretty easy to disable the right click menu:
$(document).ready(function(){
$('img').bind("contextmenu",function(){
return false;
});
});
Just make your images so ugly no one would want to take them.
Seriously, what are you worried about?
If you use the Microsoft Ajax Seadragon Deep Zoom viewer for you images then you can present your images as lots of overlapping tiles - a real pain to stick back together, difficulty depends on images size, but for hi-resolution images it makes 'printscreen' the only option for those wanting to steal stuff.
Incidentally the contextmenu thing works on divs better than images (things bubble) and you don't have to offend people by doing no click on the whole document.
To do it by class, e.g. with Prototype:
$$('.your-image-container-class').each(function(s) {s.oncontextmenu=function(){return false;}});
I am just curious if I can be able to copy books from google or not.And I am also curious to know what to make such kind of material.
I suppose the best way is to convert the text pages to images. You'd still be able to capture the images, but they wouldn't be in text form anymore; to get them back in their original form, you'd have to OCR them, which is an arduous process.