Full size image in fancybox? - javascript

how to show full sized images in fancybox?
Now, I'm using something like this:
$('.image').fancybox();
But fancybox resize original image to other sizes. For exmple if I have 960 X 350 it resizes it to 600 X 180. But I want original size. How to do this thing?

You have autoDimensions option, which can be set to true.
For inline and ajax views, resizes the view to the element recieves.
Make sure it has dimensions otherwise this will give unexpected
results
http://fancybox.net/api

A newer solution is to include jquery.fancybox-button.css and jquery.fancybox-buttons.js to your project, and then to do something like this:
$(".fancybox").fancybox({
helpers: {
buttons: {}
}
});
This will add a bar of buttons at the top of the viewport. You can click on the resize button to have the viewport expand so that you can see the entire image rather than the viewport-sized version of the image.

Related

How to do an element that is toggable on small screen sizes but always visible on big

I want to have a menu that is toggable in small screen sizes and always visible on medium sizes upwards.
The behavior should be (basically) exactly like this demo here.
The steps are:
Go to a small screen size (til the body outline is gold)
Check that it's toggable
When the menu is hidden and you get a bigger screen size, the menu should appear
When the menu is not hidden, go to a bigger screen size and it should remain shown
When on a big screen size, and element was hidden, you should see it but when you drag to a smaller size, it should get hidden
When on a big screen size, and element was NOT hidden, you should see it but when you drag to a smaller size, it should get hidden
To achieve this is very easy with:
$(".click").click(function() {
$(".menu").toggleClass("hidden-md-down");
});
My problem now is that I want to animate this show and hide and I can't do it with the class toggle.
So I have to rely on for example slideToggle() and here is where my problem lies, see demo here.
If you now go to a small screen size, hide the menu and make the window size bigger, the menu won't appear because of the hide() function.
I know this could be solve with a $(window).resize but I definitely don't want that solution since it's terrible for performance for such a small feature.
So how can I either have this toggle class with an animation or do it with js without the resize method?
I've put my comment into an answer instead: "For best performance wire your window size check to only the end of the browser resize, not to every stage."
This code works and it only runs .5 sec after the end of the window resize event rather than during (better performance). Run the code full page and squeeze your browser window to see it in action.
Instead of sending the text values #width and #height you can elect to run your menu toggle or deactivate it; I'd do this by removing the js class you're using to activate the menu initially.
And make your menu an unordered list and set it to be inline on desktop and an unbulleted list on mobile using css.
$(window).resize(function() {
if(this.resizeTO) clearTimeout(this.resizeTO);
this.resizeTO = setTimeout(function() {
$(this).trigger('resizeEnd');
}, 500);
});
$(window).bind('resizeEnd', function() {
var widthReport = $("#width").text($(this).width());
var heightReport = $("#height").text($(this).height());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="width"></div>
<div id="height"></div>

Write text to the bottom of the page depending on window size

Is it possible to have text fill the page depending on the window dimensions?
For example, I would like to have something like the following:
The text of the left of the screen fills the div that is it in. If I were to re-size the window the number of lines of "ExampleText" should change.
Unfortunately I don't have any code to show since I have no idea how to start this. I imagine that I'll have to use JS for some of it, but I'm not sure how to get JS to gather the dimensions of the window.
Many thanks.
You can get the height of the window in javascript with:
var h = window.innerHeight;
If you know the line-height of "ExampleText" (you may have already set it in the CSS or you can try getting it with document.getElementById('div_name').style.lineHeight), then divide the the window height by the line-height. That should give you the number of lines that'll fit in the window.
Alternatively, in CSS, you can set a div to height: 100% (assuming all parent elements have a 100% height) and then set an inner div to position:absolute;bottom:0; so the text starts counting from the bottom to the top. You'll have to deal with choosing to show scrollbars or not, since the text will inevitably be larger than the containing div.

If i create a map with jvectormap hide() it, change my window width, then show() it, it will scale itself to be tiny

I created two maps, one is shown and one is hidden. I have an option to choose the other map, which will hide the current one and show the other.
Here is the page load:
http://imgur.com/4MJnrZH
Here is how it looks if I change my window size even a pixel:
http://imgur.com/jzrli79
If I don't change the window size, switching between the two is fine.
When changing window size, the one currently in view will scale with the window (I put its width/height as a percentage of its parent) and will will as expected.
Thanks in advance.
Edit: If I resize the window when it's tiny, it will scale itself back to fit.
I'm not sure how jvectormap works with % sizing but I decided to go about another way to do this.
Instead of the hiding/showing from jquery, I changed the z-index to move the map of interest to the top (higher z-index), essentially emulating the jquery hide/show behaviour. Doing this, I had to change their positioning to absolute and put them into a container so that they can be layered on top of each other.
Hope this helps someone.
I change some code in "wordl-map.js" and my same problem has been resolved. in line 91:
when this.container has been created, you must set you width instead of '100%' value. I write this.params.container.width() and this.params.container.height() instead of '100%' value. Because I want to set container`s width to the map.

automatic resize pictures when scale down the browser page without break to new line

I have 3 images stacked horizontally (each image is next ot the other).
my goal is to keep those images stacked horizontally when i scale down the page size.
i would like the pictures to automatically resize down without breaking it to the next line.
i don't want to use percents (%) for the size of the images. I don't want to set the size of the images at all.
When I am using bootstrap and I scale down the page, when the page size become smaller then the pictures size,
then the image on the right breaks to new line, the same thing happens for the second image, until all the images stacked vertically.
on this point, when I scale down the page even more I get exactly what I wanted - the pictures are resizing according to the page size.
please help me to get this behavior without breaking the pictures to new lines.
this is my html:
<body>
<img src="img/test.png" />
<img src="img/test.png" />
<img src="img/test.png" />
</body>
Thanks...
Wrap your images in whatever container, say a div, then you have two options depending on the behaviour you want:
a) Set a css min-width property for the container and don't let it go narrower than that.
b) Set a css overflow-x property for the container and let the images either hide, show a scroll bar, ...
#media (min-width:450px;){
img{
width:50%;/*or whatever floats your boat*/
}
}
You can modify the min-width: value to customize your needs. This won't handle resizing. Just different media sizes.
You can use jQuery.resize to handle actually resizing a browser window like so:
$(window).resize(function(){
var div = $('#images');//images container
div.find('img').each(function(k,v){
$(v).width((div.width()/4));//resize each image however you want
});
});

jQuery dotdotdot plugin with vertical resize

I am trying to get a text block to resize vertically and use the dotdotdot jQuery ellipsis-support plugin. The dotdotdot plugin features a set height parameter, and I wonder if there's a method to dynamically update that set height. I want to take into account the total height of an adjacent div and resize the text block to fit the whole height of the particular div.
I made this jsFiddle as a loose mock-up of what I'd like to accomplish: http://jsfiddle.net/smittles/8psvZ/
Ideally, the synopsis text would expand to drop down to the red line as the red line moves down.
Because I'm using a set height this model doesn't work right now. I don't know what adjustments to make in order to get it working.
I do want to maintain the use of dotdotdot.js if possible.
Use the toggle function's callback to re-call the dotdotdot code.
See this updated fiddle or the code snippet below:
$('.share').click(function(){
$('.social_options').toggle('fast', function(){
// height will be height of image frame + share button
var new_height = $('.image_frame').height() + $('.share').height();
// if the social options are visible, add that to height as well
if ($('.social_options').is(':visible'))
new_height += $('.social_options').height();
$('.synopsis').dotdotdot({
ellipsis : '... ',
wrap : 'word',
after : null,
watch : true,
height : new_height
});
});
});
You could prevent the redundant code too by creating a function that does the dotdotdot-ing. Call that on the page load, then call it on every subsequent toggle call as well.

Categories