I hope that's the correct description of this problem. If not, please forgive me, I'm new here and new to JavaScript..
I am creating a turntable animation of a chair using a jQuery plugin called Spritespin. I have it setup so it loads a long strip of sprites of the chair rotating around its axis.
The Spritespin website shows what parameters of an object notation I can change to get the thing to work. This is what it looks like:
// initialize the spritespin
$(".spritespin").spritespin({
width : 640,
height : 640,
frames : 24,
resolutionX : 15360,
resolutionY : 640,
image : "turntable/images/LC-01_strip_black.jpg",
(some more code..)
});
As you can see, all I have to do is create a strip of (in my case) 24 images of 640 x 640 and link to it.
The problem is that I would like to add some functionality. I'd like to have a set of colour swatches to the side of the rotating chair that alow the user to pick a different colour.
My idea is to put all 7 sprite strips into one huge image (15360 x 4480) and shift its y position based on which swatch is clicked. But I have no idea how to write that code or if it's even the smartest way to go about it.
This is how my swatches are setup right now:
<div id="colourSwatches">
<div id="swatchBlack"></div>
<div id="swatchBlue"></div>
<div id="swatchBrown"></div>
<div id="swatchPink"></div>
<div id="swatchRed"></div>
<div id="swatchTurquoise"></div>
<div id="swatchYellow"></div>
</div>
I hope that wasn't too convoluted and that someone can help me.
I looked over the spritespin.js file and didn't see any function to change either offsetX/Y or the image it was using. However it seems you can call the spritespin function on the div again with changes eg:
$('a').click(function() {
var swatch = $(this).attr('id');
if(swatch == "black") {
$(".spritespin").spritespin({
width : 640,
height : 640,
frames : 24,
resolutionX : 15360,
resolutionY : 640,
image : "turntable/images/LC-01_strip_black.jpg",
(some more code..)
});
}
});
There are obviously different ways you can proceed to change the image : option like setting it to a variable which goes through the if statements (cutting down on the size of the file), using the variable in something like
image : "turntable/images/LC-01_strip_" + swatch + ".jpg"
or reading the filenames using AJAX or JSON. I unfortunately do not know how this affects the DOM or if clicking the link 1 million times will break the browser.
Related
What would be the best way in Javascript/JQuery to determine the size in pixels a div would actually take to display it?
Let say I have a table with and the columns are fixed with the tag width="60px". Inside this column I add dynamically a div with a certain content, which will mostly be the following :
<div class="auto">
<img width="50px" src="/images/header-5123724.png">
<hr>
<span>Table1</span></div>
So, I know the size of the image which is 50px, but I do not know how long the text will be.
Another hint I have is that the element <span> will always be there, and the content should not be wrapped.
Is there a way to "render" the span and to get the size in pixels?
Any help is appreciated.
I found a way to accomplish what I wanted. I will post it here, maybe that can help somebody.
// add an extra span
$(this).parent().append('<span id="test" />');
//.. pick up the element to test into obj
// test the size
$('#test').html(obj.text()).css({
'font-family': obj.css('font-family'),
'font-size': obj.css('font-size'),
'font-weight': obj.css('font-weight')
});
//Width and adjustment
Width = $('#test').width() + 24;
//...If we want to check the max width, then we can loop through many columns of the table
//Finally adjust the width
obj.width(Width).css('min-width', Width);
//Cleanup
$('#test').remove();";
It is not very clean, but that worked for my case. For some reason the size of the columns were not set properly because it was resized by some plugin after the content was rendered by the browser.
Cheers.
Will the width be calculated on page load or on the fly?
If it is on page load then, #cont is the id of the content box.
$(document).ready(function() {
var dynWidth = $('#cont').width();
console.log('dynWidth: ' + dynWidth);
});
If it is on the fly then,
$(document).ready(function() {
$('#cont').bind('DOMSubtreeModified', function(){
var dynWidth = $('#cont').width();
console.log('changed dynWidth: ' + dynWidth);
});
});
Note: DOMSubtreeModified is not supported in IE8 (and below).
For any details refer this link.
The problem is that I have an image larger than 477 x 205, but i'll need them for another things, it would be a problem to make 2 or 3 images with diferent sizes. So, I decided to resize it on jquery. The major problem is that i'm new on JQUERY ( please, be patient :B ).
I've read some of the topics, but none helped me, the one that got closer was to add "$('#slides').css('background-size', '477px 205px');":
$(document).ready(function() {
$('#slides').coinslider({ hoverPause: true });
$('#slides').css('background-size', '477px 205px');
$('#slides').css('overflow', 'hidden');
});
but, that didn't solve it, also, it starts at the right size, but when the slider starts looping, it gets a mess again
Change this:
$('#slides').css('background-size', '477px 205px');
To this:
$('#slides').width(477).height(205);
The overflow: hidden will hide the rest of the image.
More relevant code would be helpful in providing better guidance. Have you considered "background-size: cover" yet?
Reference 1,
Reference 2
After 1 week without the solution, i've reached on what I was making mistakes, i was o the .js, when the Js loads, he create his own CSS for the slider, so I had to add the "background-size: size" on it like this:
// positioning squares
$("#cs-"+el.id+i+j).css({
'background-position': -sLeft +'px '+(-sTop+'px'),
'left' : sLeft ,
'top': sTop,
'background-size':'477px 205px'
});
as it wasn't fixed a size to it, it would take the real size of the image as default.
Thank you for trying to help me with this issue!
I'm having serious troubles implementing Jcrop. I'll show the code regarding Jcrop implementation:
$("#crop-mini").Jcrop({
onChange : updatePositions,
onSelect : updatePositions,
boxWidth : 500,
boxHeight : 400,
keySupport : false,
setSelect : [0, 0, 999999, 999999],
minSize : [10, 10]
});
Where #crop-mini is the <img> tag containing the image. updatePositions is just a function that... updates the selection positions. Pretty straightforward:
function updatePositions(coords)
{
$(".x").val(coords.x);
$(".y").val(coords.y);
$(".w").val(coords.w);
$(".h").val(coords.h);
};
I upload an image, write its url into the <img> tag, fire a fancybox and call JCrop. However, when I resize the selection box, boom, this glitch appears:
It looks like the selected content shows the same image being deformed from positions coords.y (coords is the current selection position) to coords.h+coords.y, and from 0 to coords.w. If I put the selection touching the left corner, you would see the whole image.
By the way, cropping works as expected, and the real coordinates are being passed, so I happen to think that the problem is within the presentation, not the processing. Did I do anything wrong?
This happens when you have max-width set in your css:
img {
max-width: 100%
}
Just add the following rule to fix it:
.image-version img {
max-width: none;
}
Where .image-version is a css class of the element wrapping <img> with id #crop-mini.
Would like to bring a single image to the front or on top of the page, when selected.
After searching, it seems there are many plug-ins that support this - but also have a lot of other functionality and overhead I don't need (gallery, support for video, thumbnails, etc.)
Is it possible to just bring a single image on top with basic JavaScript, CSS, HTML and jQuery, specifically in FireFox?
Thank You.
(Please note*: This is an in house product, hence these requirements and constraints.)
Is it possible to just bring a single image ontop with basic JavaScript, CSS, HTML and jQuery, specifically in FireFox?
Yes, it's possible, but the plugins are most of the time an easier implementation. What you are trying to accomplish is something similar to the light box effect, but I'll try to give a simple solution based on 4 steps you need to accomplish what you are trying to do:
Create an overlay div. This one div will blur or darken your entire page. In the below example it will darken your screen (because it's simpler).
Create an div that will be appended to the overlay div and will contain the image you want to show. In the demo below, this div will be lighter than the overlay one and will actually have half the width and half the height of your screen.
Append a bigger image to your image-div.
Add a subtitle to your image based on it's alt text.
$(document).ready(function()
{
var docWidth = $(document).width();
var docHeight = $(document).height();
//First Step" Creating the overlay-div and adding opacity to it
var overlayDiv = "<div id="overlay-div"></div>"
$("body").append(overlayDiv);
$("#overlay-div").css("position","absolute", "top","0","left","0","background-color","#000","opacity","0.5", "width", docWidth + "px", "height",docHeight + "px");
//Second step: Creating the image-div and centering it on the screen
$("#overlay-div").append("<div id=\"image-div\"></div>");
$("#image-div").css("position","absolute", "top",docHeight/4 + "px","left",docWidth/4 + "px","background-color","#FFF", "width", docWidth/2, "height",docHeight);
//Third step: Creating an image to display inside the image-div and centering it
$("#image-div").append("<img src=\"path/to/your/image\"id=\"zoomed-img\" alt=\"This is a zoomed image\"/>");
var imgWidth = $("#image-div").width();
var imgHeight = $("#image-height").height();
$("#image-div").css("position","absolute", "top","10px","left","10px");
//Fourth step: Creating a subtitle from the alt text
var subtitle = "<p id=\"text-subtitle\">" + $("#image-div").attr("alt") + "</p>";
$("#image-div").append(subtitle);
$("#text-subtitle").css("position","absolute", "top",imgHeight + 20 + "px","left","10px");
});
This function is triggered when your document is ready, and get an arbitrary image. But it's possible to display a different image (with a different subtitle) triggered by a click with a little tweak of the code above.
I had the intention to show you a simple demo that it's feasible to with with a few lines of jQuery/javascript code to create what you want. Of course it's not as pretty as 90% of the effects of the plugins there are around but it may be a start.
I hope it helped. Cheers
Here is a very basic example I whipped up. Hopefully good to learn from:
http://jsfiddle.net/v9LTP/2/
$('img').click(function(){ //bind a click event handler to images
var img = $(this).clone().addClass('modal').appendTo($('#blackout')); //clone the clicked image element and add to the blackout div which gives the dark background.
$('#blackout > #close').click(function(){ //attach click handler to close button
$('#blackout').fadeOut(function(){ //fade the blackout div
img.remove(); //remove the image element we cloned, so we can do it again.
});
});
$('#blackout').fadeIn(); //show the blackout div
});
For a stupid simple lightbox I've been leveraging http://buckwilson.me/lightboxme/ lately.
Try Modals of Bootstrap.
JavaScript - Twitter Bootstrap
GitHub source code
GitHub bootstrap-modal.js
Previously, I asked how to center align an image (w/ dynamic width) within a div and someone replied with this code:
http://jsfiddle.net/WDzx4/6/
It's working correctly. However, when I try using the same class for another image, the other image is no longer vertically centered:
http://jsfiddle.net/b4Bbd/
You see, now, the 50x50 black image is slightly higher than it should be. I noticed that only the first image gets aligned correctly. If I add other images with a different width and height (using the same class) after that, they will be misaligned.
Could somebody help me find the problem as I'm not really familiar with javascript.
You need to wrap the JavaScript to do everything for all matching elements, instead of calculating the height for one and applying to all:
$('div.container_img img').each(function() {
var $img = $(this);
var h = $img.height();
$img.css('margin-top', +h / -2 + "px");
});
Try this: http://jsfiddle.net/timothyclifford/b4Bbd/7/