ContentFlow plugin: Changing size of non-active elements - javascript

For anyone that's used the javascript plugin "ContentFlow" (http://www.jacksasylum.eu/ContentFlow/), do you have any idea how to change the size of the NON-ACTIVE elements? It seems that they're always half the height of the center image, but I'd like to make it something closer to 75% of the height.
I've been digging through the JS source code, but I can't seem to pinpoint the place where I adjust the size. Every time I adjust a value, it resizes all of the elements, including the active center image.
Please note, my "visibleItems" property is set to 1, as I only need to display one image on either side of the center image.
Thanks.

Try using the Gallery addon. There is a calcSize function in the addon JS that may help you calculate the size you want.

Related

HTML: Image map areas' responsiveness

I need to use image map in my website, to add different links to each part of image.
But I have problems with its responsiveness. I couldn't change map area's size while resizing window.
Can anyone help me with this? The method is not important, I can use either Js or Css.
Update:
I used http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html for responsiveness, but it affects on map area coords. When I reload the page, map coords are all 0, those are being updated only after resizing the window.
Do anyone have this problem too?
Imagemap is a very Old way to create websites I preffer using photoshop image sílice and save as html maybe you should try it ir you will use non dynamic images that way you can fix width and height and a lot more
If you have the image saved as a vector image, you could save it as an SVG and use RaphaelJS. I've only recently picked it up but it is quite easy to use once you get the hang of it.
You can assign links, style and hover events to each node attribute, and Raphael allows you to set the viewBox so that it scales on resize (can't link as rank not high enough - help can easily be found on SO though)
Here are some examples of using RaphaelJS: LINK1 LINK2
And check out jsfiddle.net/AUNwC/294/ for example of each node having a responsive clickable area (resize window to check)

Animated pop-up like on wunderlist.com

I've came across wunderlist.com site and just fell in love with the zoom-like pop-up they have on the image just beneath the header "Learn more about Wunderlist".
I'd love to implement something like this on my site.
Can somebody tell me how this is done? I tried to reverse-engineer, but with no luck :)
I'm not hoping for the whole ready code, but maybe some guidelines on how to achieve this with CSS/jQuery.
Or maybe you know some jQuery plugin that I could use?
They are using all CSS. Pretty simple really.. I would code a full js fiddle example for you but I don't have the time, so instead I will list out the different elements you need and how they interact.
First the large image is just a div with a background image with set
dimensions.
The circular images themselves are generated from one large image containing all of the circles in one spot, this is called a sprite. The circles are just div's with background images and background positioning to position the correct circle inside the box from the sprite image.
The text boxes themselves are also div's with a standard H2 and P tags for the text.
Everything is absolute positioned in order to achieve the proper layout.
The small circles are div's with :hover states that are absolute positioned over their respective targeted areas.
The animation on :hover is achieved by the use of css3 transition and css3 transforms.
This should get you started.
Comment if you have questions.
Had some time to have some fun: http://khill.mhostiuckproductions.com/siteLSSBoilerPlate/fun-experiment-mh/
Try looking at two main aspects:
Open up your inspector tool of choice and look at what happens to body.login .feature
...more specifically, look at what happens to its transform: scale and opacity values upon :hover.
Hint: the transition is mainly on them.
Still in your inspector, change the scale to (1) and the opacity to 1. How it smoothly gets from one state to the other is dictated by the transition property.
This isn't meant to tell you exactly how to achieve it, but to get you on your way :)
It's not that hard actually. The Wunderlist team has even made it easier. They have a large sprite image with the zoomed images cropped and ready with rounded corners, borders and shadows. You can see it here: https://wunderlist2.s3.amazonaws.com/179510ff7c929bfcc6e9819f3c2539baca5d3325/images/welcome-screen.png
What you do is on mouseover you show a half transparent black background (can be position: fixed with full width and height). Then you create a element with the sprite as the background image (even better, have a class ready in your css and append it to your newly created element). Set position to the position of the hovered element.
When added to the dom animate the transform scale of the element (starting with something like scale(.24) as they do).
Well since you tried reverse engineering. I'll try and guide you along that path.
There is only one div with id overlay which is changes it's place & content, on hover of any div with class feature. Work your way further from their app js, it's not minified.
The content of the popup in this case is an image moved to different positions.

Use CSS transforms or javascript to scale an element to fit its parent dynamically

I have a page in which I have a wheel of <div> elements, the entire wheel rotates when you click a button.
I achieve this effect by using CSS transforms, which are absolute in nature. However the wheel is very big, it looks nice on my HD display, but smaller screens get the edges cut off. I can not use % widths like I could with a normal layout, what I need is to scale the entire page down in the same way most browsers zoom functions work.
For myself I know that ctr+mouseWheel will zoom out the page so I can see the entire page, however I can not expect others to do this.
I know I can use -browser-transform: scale(amt); on a wrapper div to get the effect I want, however I can not figure out a way to do it dynamically. If I set the scale to .5 it will be .5, no matter the screen. I want the edges of the wheel to just be a few pixels from the edges of the screen on ANY screen. I know that media queries could be used to help the problem, but they would either leave me with results that are less than ideal, or require too many different queries. There must be a way to modify -browser-transform: scale(amt); programmatically, or some other way to have finite control.
Any thoughts?
Have you tried using media queries in css to target different screens. for example, have a media query in your css file that states that at a width of 320 - 480 pixels, the div containing this wheel is scaled to 50%. Then at 481-768 pixels, the div container is scaled to 75%. and from 769 pixels up, the div is scaled to 100%.
That should help you accomplish the dynamic scaling you want at different screen sizes. If you would like a demo, I'll be glad to make a jsfiddle showing it.

Shrink dimensions of gif as part of animation

Trying to find out if it's possible to 'shrink' an animated gif. Not in file size but in regard to the dimensions of the image.
If not, is there any way to catch the animation with jquery/javascript so I can shrink the size my moving the image out of view with css?
Or alternately after there any libraries out there for simple image manipulation type stuff for HTML5 Canvas?
EDIT:
The first mock up of the image is at http://swmohappening.info/. It's essentially a website that I'm doing to help out a local youth group retreat.
I'm wanting to shrink the portion of the letters that run-on so it's a more manageable banner to leave on the page. I do need to maintain the dimensions of the center/main section of the image.
Take a look at the animate function in jQuery - you can change the size of an image and specify the time that takes too.
As what I've read makes it seem as though the jquery animate will simply change the dimensions of an image (which isn't what is needed at the moment). I think I'll most likely end up using animate to move the image out of view to 'shrink' it that way...

Is there a jQuery gallery/slideshow plugin that matches these criteria?

Can anyone point me in the direction of a jQuery slideshow/gallery plugin that matches these criteria (or can be customized to through setting its options)?
Can be inserted into a div - not a popup display
No border/thumbnails/filenames/buttons - when an element is being displayed, that's all you can see
I need to able able to set a max height and width for the gallery as a percentage of the page dimensions. If an image is being displayed, it needs to be re-sized to fit this whilst maintaining its aspect ratio.
Can display any type of element (although if it can only display images I'm still interested)
I've had a look at some plugins, but I can't find one that is suitable. Is there one? Thanks for reading.
You should look at Thickbox or lightbox.
You want to display it in a popup or not?
You can try Cycle plugin - I've used it many times and it's stable. For resizing the images according to the page's dimensions, you can do that before applying the plugin, either with PHP or jQuery.

Categories