I have been trying to animate images using jquery. I came across the following post when I was searching for examples.
http://jsfiddle.net/fwUMx/99/.
The images right now are increasing and decreasing their height in a loop. I just have a question if I can do the following using jquery?
I have 6 six ads with almost same size. All ads to randomly rotate within those 6 spots so one ad is not always at top or on the bottom.
When the ads rotate, they can either flash in or quickly fade in for 5 seconds.
thanks
Have a look at the always-excellent jQuery Cycle plugin.
Related
I want to realize the following. Let's imagine 6 company logos vertically placed on desktop view. When I watch the site on tablet (or shrink the browser manually), 2 company logos jump to the next line, but I want them to be centered. And not floated to left, as all grid systems do. Is it possible somehow? Especially with Bootstrap?
My theory is, if I could know which images are in the second row, I could count then the offset from left, and move the images with js to a centered position. But only, if it is needed, so if 3 images jump to the new row, it's okay, nothing to do with them. Am I right?
Didn't found any solution or plugin knowing this specific feature.
It is possible to use Javascript to do this but it would be better most of the time to do this using responsive breakpoints. So if your desktop grid classes are col-md-2 and when going to a tablet size, two jump down, it would usually be better just to make the logos col-sm-4, making 3 logos on each row.
If you notice only 2 images jump down on tablet, you could also add col-sm-6 to just the last two to potentially center those images on the next row.
this is a general web design question but seeing that the site I have built for my client was built using wordpress I will ask it here first.
My client has a lodge/chalet with 2 floors. She has supplied CAD drawn floor plans of both floors and photos of all the rooms. She has asked if I could add the functionality of showing image popup's of the rooms as the mouse pointer is hovered over each separate room in the original floor plan image. I understand that somehow I would need to create zones overlaying the original image, with mouse over css rules which display the photos.
I think it is a lovely idea and hope some clever soul could point me in the right direction of achieving this.
Many thanks
I would split up the floor plan into smaller sections (squares or rectangles), put them into divs as backgrounds, then add CSS or jQuery for mouse over on the divs to popup said images.
I'm working on a school project and we are developing an interactive story with the A-Frame framework. The idea is to visit your old house and to have memories about good old times. So we're using 360° images in sky entities and we're switching those images between present and past.
I'm working on the transition when switching images, but the only good transition I can develop is a simple fade to black... My idea would be to get something similar to CSS Mask Transition here : https://tympanus.net/Tutorials/CSSMaskTransition/
Is it in any way possible to get a similar result ?
If not, would you have any idea of a good and easy transition that I could do ?
Just so you know, I'm not used to web development, we only have 3 days to finish this experience and I'm completely new to the A-Frame framework (I've been working on it for 3 days now only).
Thank you very much for you time and have a nice day !
Augustin.
A transition similar to that will be pretty involved to implement, I don't think it is possible in the span of a couple days with not much graphics experience. You'll mostly likely need to write your own shader that changes the alpha value of each pixel. Or you can maybe create an alpha map GIF or video, and use that to control the alpha values of the texture.
A-Frame has an example for transitioning between 360 images. For better performance, you have one image, do a fade to black, swap out the image, and fade back out: https://github.com/aframevr/360-image-gallery-boilerplate
Apologized for this post.
i want to download very big images for leaflet js. i search google but i found no very big which need lots of vertical and horizontal scroll to see full image. so if anyone know any url of big image photo which need lots of vertical and horizontal scroll to see full image then please share with me.
basically i am looking for big image to create small small tile from there as a result i could start my R&D code with leftlet js. basically i want to load my huge tile images using leaflet js api.
i found some big image url but those are not that much big. here are few which i found after searching google.
http://i2.liverpoolecho.co.uk/incoming/article9588426.ece/ALTERNATES/s1023/JS67516633.jpg
http://inapcache.boston.com/universal/site_graphics/blogs/bigpicture/natural_world_2011/bp1.jpg
http://photoblogstop.com/wp-content/uploads/2012/07/Sierra_HDR_Panorama_DFX8048_2280x819_Q40_wm_mini.jpg
thanks
OK, as far as I understand, you mean a big image in the terms of x/y number of pixels. Isn't the easiest way simply to make a photo and upload it somewhere you need? Contemporary cameras make really big images. 12mpix cameras make 5000 something by 3000 something, which should be enough for your purposes. Shouldn't it?
I'm very new to bootstrap, and programming in general so please be patient! I have literally spent hours trying to find a solution to my problem via here/google, and the time has come to ask for some help!
Basically, I am trying to make a website for displaying photos in a carousel. I want my site to be responsive so it works on smaller devices. All my original images are the same size/dimensions (2304 x 1728 so 4:3, probably too big) and use the img-responsive class.
It looks fine on a large screen, but when I try it on smaller laptop screens and tablets, the image height causes scrollbars to appear so you can't see the bottom of the image/caption. However, the image width is responsive and shrinks to fit without scrolling.
I am of the understanding that the carousel size is dictated by the image size, so the logical solution would be to make my image size smaller in height - but I need to maintain the aspect ratio, and smaller images didn't look so good. I also tried setting a fixed height as a style but it didn't work.
What is the ideal image size (in px) for a carousel which takes up most of a browser window (allowing for navbar/header/footer), and how do you make it so the height doesn't require scrollbars?
Many thanks in advance!
My answer may not be accepted by everyone , but I think the only flaw of bootstrap is precisely the Bootstrap Carousel
Can not be changed easily (since as you say you do not have much programming experience), and does not offer a lot of customization
So I think the best solution for your problem is Owlcarousel , offers hundreds of customization options
OWL Carousel
Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider.