im building a webshop in Drupal and i was wondering if you could help me with the following problem:
I got one big image frame (500x500) and 5 little image thumbnails(95x95) underneath the big one.
How can i realise that if the visitor clicks on the thumbnail, the big image frame gets filled with that specific image?
jQuery is the right direction, but the strength of Drupal is based on doing things "the drupal way", which means, I guess in your case, to use Views as the origin for the thumbnails using imagecache + lightbox, and somehow change the main "frame".
I used jcarousel in some cases (for different but similar uses) and it works nice. I guess it is possible to trick it to do what you need, or - better - to find an existing module that do what you want.
I know, many Drupal buzzwords, and a stiff curve to overcome, but this is the right direction in case you want to base your site on Drupal.
If you don't need all of these, and want a static page+jquery, Drupal might be an overkill altogether.
If you use Views, Imagecache, and the Lightbox2 module, you can create image galleries out the arse and tell it to link the field to its large size and use Lightbox2 as the method. This is how I do most of my galleries.
Drupal uses jQuery so you can write a simple jQuery script to handle this (not sure if there's already a plugin to do that). Just add all the img tags (make sure all of them except the first one are hidden[display=none]). Then when a thumbnail is clicked/hovered do a $(big_img_holder).replace() with the tag for the image to be shown. Tell me if you want to see some code and I'll try to show you.
You can see this plugin as an exapmle. Just replace the numbers on the right with thumbnails and you're ready to go ;-)
Related
I am searching to solve this issue for 3 hours. my theme is generating such images which i don't need. i am trying to get support but answer is not coming. can someone please tell me
How can i stop generating (one or more) specific dimension images to
save my bandwidth. i am not asking about the default images of
wordpress like medium, full or small. and also i am not thinking to
remove code.
i just need a code which i put on my site (probably in functions.php file) which can stop generating images of a specific dimensions.
So I've been creating a custom responsive theme in Wordpress and I've hit a wall when it comes to image management. I'd like to style images in a way that wordpress doesn't seem to inherently support - I'm looking for something like this:
with the images added via the regular wordpress media management pane, and inserted into posts/pages. The images should be out of the flow of the content but accurately placed next to the correct headers/text blocks. Most importantly, the images ought to collapse into a column with the rest of the content at the correct media query breakpoints.
Here's what I've tried, from worst to best:
Hard coded images in template files
Obviously the worst option. Not portable, requires a lot of meddling, and would be almost impossible to align the images with the correct content. Also, no real way of making the images responsive with the content.
Use the default image styling and abandon the idea of pulling the images out of the regular flow
Non optimal, but it would allow anyone to change/edit images easily.
Remove images from the results of the_content(), then place and style them separate.
Portable, but has the same problems as #1 - difficult to align the images with content and keep responsiveness.
Use the featured image on pages that only require one image
Pretty good option for pages that need ONLY one image, but there is no easy way to make the featured image an arbitrary size/aspect ratio.
Use markup in the editor to correctly layout the images
Requires anyone editing the posts/pages to have some knowledge of the underlying theme. This seems to work the best, but it isn't portable (might break stuff on theme change).
While I've had the best results with this option, it seems sort of antithetical to using a cms/wysiwyg editor in the first place.
My question is whether or not the last option really is the best to get the result I want?
In the end, the answer was clearly custom fields, and none of the other options I listed. With the advanced custom fields plugin, it becomes a breeze to do what I wanted. You don't need the plugin, but it makes image management a whole lot easier, as it fully integrates the wordpress media library with the custom field (which you would have to do manually otherwise). With the plugin, custom fields meet all of my needs (responsiveness, portability, and ease of use for the technically challenged).
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’ve been thinking a while about the best solution and as much as I read I get more and more confused. There are a lot of different libraries and helpers (most of them are outdated or for CI 1.x) and I really need your help.
I have a custom CMS based on CodeIgniter 2.1.3, news site that has about 40-50 images on the home page, but 80% of them are really small thumbnails in 3 different sizes and the other 20% of the images on the home page are in 2 sizes + for the inner pages when I list the news from a category there is 1 size of thumbnails. So in total I will need the original image for the news story, + 5-6 thumbnails sizes for the home page.
What’s the smartest way to deal with this? There will be let’s say 10-50 new news per day.
Is it still better to create 5-6 thumbnails per image during the upload?
What about the method “on the fly”? I’m more into this method, as I read, only the first visitor will call the library/helper to generate the thumbnails, and for the others the thumbnails will be already created so it won’t waste CPU. What about this method? Is it good practice?
What caching techniques I should use for these what I need?
Also I forgot to ask, how the other CMS system deal with generating the thumbnails? I mean about Wordpress, Drupal, Joomla, etc.
Do they store predefined sizes or generate them on the fly?
I guess their logic should be the best, or maybe not, but I want to implement something smart in my CodeIgniter CMS.
I didn’t mention, but I think it’s not important to this, I use Grocery CRUD for the admin panel.
Any help is appreciated.
Your best bet is to create images on the fly + use CDN like Amazon Cloudfront to cache the resized versions of your source image.
I’ve been using CodeIgniter for a number of years to build websites where lots of different sizes of images are used throughout the website. At the beginning I used to create every size needed out of the original image during the upload process (could easily end up with more than 5 thumbnails). This proved to be delivering the best performance – whenever you need an image of the certain size you just include it with no additional PHP processing. However I noticed that I end up with a huge number of images on the server, where the older ones may not even be used that often (e.g.: articles older than a year). Plus developing this way takes longer.
Then I started creating images on the fly, firstly using 3rd party libraries and later developed my own interface for CodeIgniter. This saves a lot of time, because during the upload process you save an original version of the image not worrying about resized versions. When displaying an image in the front end, all you normally need to do is to pass certain dimensions of the image required. Doing this way, not only you can get 5-6 versions of the image, but as many as you need. Also that’s a solution for the future when you redesign your website where the different sized images might be needed! What would you do when none of your 5 thumbnail options are no longer valid and you need different sizes?
You’re right, resizing an image on the fly can really be CPU consuming operation (especially when the large images are involved), therefore caching is a must. You can cache images right on your server or get CDN on top of that.
To keep the server tidy I normally run a cron job to delete on-the-fly images older than let's say a week. That saves space + doesn't cause harm - whenever image is needed to display, it'll just get recreated.
Check out timthumb, it's a script that resizes images on the fly and stores them in a cache. It's a simple as including an image tag with parameters in the URL.
ALso check this link which looks promising http://www.jenssegers.be/blog/31/Codeigniter-resizing-and-cropping-images-on-the-fly-continued
I love the way Drupal manage this. In Drupal 6 there was a module called imagecache (now is in core in Drupal 7, but functionality is very similar), which basically stores presets for images (image sizes, transformations, effects...) and when the visitor ask for an image the module generate different images based on presets and serve this images. This way you upload an image but have different images for different purposes.
The module has a really useful feature, if you want to change one preset, you can "flush" all the images related with that preset, so the visitors can see the changes.
Of course there are many other modules in Drupal related to imagecache or image styles, that add other effects like watermarks...
More information:
http://drupal.org/node/949222
http://drupal.org/node/163561
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;}});