I'm sure you've all seen this demo of image replacement using this :
$("#largeImg").attr({ src: largePath, alt: largeAlt });
http://www.webdesignerwall.com/demo/jquery/img-replacement.html
So, imagine that I want to change 4 images on the screen to simulate that I am changing the entire 'page' , but avoiding using AJAX / PHP or any image preloaders. The problem I am having right now with my code :
<script>
$(document).ready(function(){
$(".navlink").click(function(){
var theirname = $(this).attr("name");
var imagepath = "images/img_"+theirname+".jpg";
var headerpath ="images/header_"+theirname+".png";
var textpath = "images/about_"+theirname+".jpg";
//var lightpath = "images/smallimg_"+theirname+".jpg";
$("#primeheader").attr({ src: headerpath});
$("#primetext").attr({ src: textpath});
$("#primephoto").attr({ src: imagepath});
});
});
</script>
is that when you call a 'fade-in', 'animate opacity' or anything like that, the switch of the image source using .attr({src : whatever}) always makes it visible first , even after making the .css visisbility none / invisible.
I have already tried delaying, setTimeout , etc (I tried to research as much as I can to avoid duplicate posts)
Hope that makes sense, sorry if it's too wordy / unclear
Feedback is appreciated! Thanks!
What happens if you wrap all of the elements with a container, then fade the container out/in during the image transition.
$('#primeContainer').fadeOut('fast', function() {
$('#primeheader').attr({ src: headerpath });
$('#primetext').attr({ src: textpath });
$('#primephoto').attr({ src: imagepath });
$(this).fadeIn('fast');
});
Related
I would like create a sprite with Gulp, create a CSS file with coordinates automatically and insert the image from this sprite with name, like :
.my_class {
background-image: url("images/my-image.png");
}
After a research I would like use gulp-sprite-generator but I do not understand how I can use it.
In my gulp file I add the configuration of this plugin :
gulp.task('sprites', function () {
var spriteOutput = gulp.src(app + '/css/*.css')
.pipe(plugins.spriteGenerator({
baseUrl: 'app/images/sprite',
spriteSheetName: 'sprite.png',
spriteSheetPath: 'dist/images/'
})
);
spriteOutput.css.pipe(gulp.dest('dist/css/'));
spriteOutput.img.pipe(gulp.dest('dist/images/'));
});
But when I call gulp sprites in a Terminal, no sprites are created.
So, I guess I need use the CSS for tell him to create some sprite from the sprite folder but I don't get it.
Thanks for your help.
I have done some work around and found gulp.spritesmith plugin
https://github.com/twolfson/gulp.spritesmith
using this plugins I am able to create sprites image and css for my application.
that's how I did it...
var spritesmith = require('gulp.spritesmith');
// Sprites task - create sprite image
gulp.task('sprites', function () {
var spriteData = gulp.src(paths.source.images).pipe(spritesmith({
imgName: 'sprite.png',
cssName: 'sprite.css',
imgPath: paths.build.images + 'sprite.png'
}));
spriteData.css.pipe(gulp.dest(paths.build.css));
spriteData.img.pipe(gulp.dest(paths.build.images));
});
this way you'll get sprite.css file in destination css folder and sprite.png in destination images folder.
Look at the example – https://github.com/alex-chuev/gulp-sprite-example. It is usable.
But I also met a problem. I had saved my images from Photoshop with Ctrl + Alt + Shift + S and I got the same message:
Created 0 sprite(s) from 0 images, saved 0% requests
I have resolved the issue by disabling the "Interlaced" checkbox in the save dialog:
I would like to two show a Chart and also present an url with a link to a bigger Chart. The small preview-image looks and works fine:
<canvas id="image"></canvas>
var ct1 = document.getElementById("image").getContext("2d");
ct1.canvas.width = document.getElementById("image").offsetWidth;
ct1.canvas.height = document.getElementById("image").offsetHeight;
var Chart1 = new Chart(ct1).Line(lineChartData1,options);
The canvas is wrapped in a div, that's why offsetWidth and offsetHeight (to fill this additional div-element). Cause of the responsive-design there is no fixed image. Anyway, this works perfectly. For the URL to the "bigger" image I want to have the URL. I know the toDataURL() will help.
var url = document.getElementById("image").toDataURL();
document.write(url);
There are two disturbing problems with it:
The URL with this way exisists and, but the image has no content.
I also want to give the canvas-image a new size, like I managed with ct1.canvas.width and ct1.canvas.height, but it seems I cannot add this to the toDataURL.
What's wrong with the code?
Okay, I think I got it. Chart.js is animating the charts, so the toDataURL() I mentioned in my first question rendered only an empty image. We have to initiate the toDataURL, not before the animation is done. We handle that with the options:
var options = {
onAnimationComplete: done
}
and a tiny function:
function done() {
console.log('done');
var url=document.getElementById("canvas").toDataURL();
document.getElementById("canvas_link").href=url;
}
I think that's all.
Here is the problem :
I have a canvas, and four (would be more in future, but 4 for testing...anyway, doesn't matter) images that can be "poped" into the canvas by clicking on it.
Each image can be present multiple times in the canvas.
So far, poping is working fine, images are draggable... But I can't add some resize or zIndex function as I can only select the last image add to the canvas.
In a ideal world, I would like, by clicking/dragging an image, put it on top of the canvas, and kinda "select" it, so that I can connect the resize functions to the image.
But with the array of images, I can't manage to identify properly the item dragged, and can't use (or don't manage to use) the selectors.
Thank you.
EDIT : some code
var imgCpt = 0;
var image = [];
function addDetails(img) {
imgCpt++;
var imageObj = new Image();
imageObj.onload = function() {
image[imgCpt] = new Kinetic.Image({
x: 0,
y: 0,
image: imageObj,
draggable: true,
id:image[imgCpt]
});
image[imgCpt].setX((stage.getWidth()/2) - (image[imgCpt].getWidth()/2));
image[imgCpt].setY((stage.getHeight()/2) - (image[imgCpt].getHeight()/2));
eval(image[imgCpt]).on('click', function() {
alert(eval(imgCpt));
});
layer.add(image[imgCpt]);
stage.add(layer);
};
imageObj.src = 'uploads/'+img;
}
I've already tried different solutions : multiple layer, and acting on it instead of acting on image, working with shapes filled with image instead of image, but it's always the same problem : I can't get the id of the concerned element (instead of the id of the last insert element)
This version works with array, but I tried yersterday to build the image id with eval(); without more success.
Thank you for your help
EDIT² : sorry to insist, but I would really be glad to have some assistance on this point, even if I think it's more JS related than pure KineticJS related.
Thank you.
Ok Guys, just solved the problem :
eval("image["+imgCpt+"].on('click', function() {alert("+imgCpt+");});");
Instead of :
eval(image[imgCpt]).on('click', function() {
alert(eval(imgCpt));
});
Now time to set a true action behind the click.
Thank you for helping ;)
Another image overlap issue here using Masonry and Ajax to append items in Wordpress. The first time more items are appended, the images overlap. However, when the page is reloaded, the images no longer overlap. I realize after doing some research this has to do with calculating the height of the images.
From the help page on the Masonry website, it is suggested to use the getimagesize function in order to specify the width and height of the images.
However, this is where I am stuck. Because of my limited knowledge of PHP, I have no idea how to utilize this function or where to place it in my code, so I'm looking for a little direction here. Can anyone help me figure out how to integrate the getimagesize function into my code?
Here is the masonry code:
$(document).ready(function(){
var $container = $('#loops_wrapper');
$container.imagesLoaded( function(){
$container.masonry({
itemSelector : '.post_box',
columnWidth: 302
});
});
});
This is the ajax fetching code:
$('.load_more_cont a').live('click', function(e) {
e.preventDefault();
$(this).addClass('loading').text('Loading...');
$.ajax({
type: "GET",
url: $(this).attr('href') + '#loops_wrapper',
dataType: "html",
success: function(out) {
result = $(out).find('.post_box');
nextlink = $(out).find('.load_more_cont a').attr('href');
$('#loops_wrapper').append(result).masonry('appended', result);
$('.load_more_cont a').removeClass('loading').text('Load more posts');
if (nextlink != undefined) {
$('.load_more_cont a').attr('href', nextlink);
} else {
$('.load_more_cont').remove();
}
}
});
});
You could try to implement David DeSandro's timer approach here for appending images...
"As recommended in the primer, the best solution to handle images is to have the size attributes defined in the img tag, especially when using Infinite Scroll. This is the solution employed in the example below.
Of course, this is not a viable option in some CMSs, most notably Tumblr. In this situation, Masonry needs to be called after the newly-appended images are fully loaded. This is done by delaying the Masonry callback."
function( newElements ) {
setTimeout(function() {
$wall.masonry({ appendedContent: $(newElements) });
}, 1000);
}
EDIT: If you can't implement the common delay idea for appending items with infinite scroll, you could try reloading after appending new items so instead of
$('#loops_wrapper').append(result).masonry('appended', result);
do it like that
$("#loops_wrapper").append(result).masonry('reload');
I have a page with lots of images on it, and only want to load extra images on demand. IE if the user clicks on it or mouses over, whatever. Most if not all of the sliders i've seen use the hidden attribute with all the elements getting loaded at once, which would cause undue burden in my case.
I liked: http://nivo.dev7studios.com/ but it has no such feature.
Anyone know of an ajax slider preferably using jquery?
Thanks
I think you can do that with jcarousel:
http://sorgalla.com/jcarousel/
The trick is to pass the images one by one in javascript, not in html, if not, there are always loaded beforehand.
The code would be:
var mycarousel_itemList = [
{url:"/im/a.jpg", title: ""},{url:"/im/b.jpg", title: ""}];
listaimg=document.createElement('ul');
jQuery(listaimg).attr('id','mycarousel');
jQuery(listaimg).addClass('jcarousel-skin-tango');
jQuery('#containercarousel').append(listaimg);
jQuery('#mycarousel').jcarousel({ auto: 9,wrap: 'last', visible: 1,scroll:1, size: mycarousel_itemList.length,
itemLoadCallback: {onBeforeAnimation: mycarousel_itemLoadCallback}
});
function mycarousel_itemLoadCallback(carousel,state){for(var i=carousel.first;i<=carousel.last;i++){if(carousel.has(i)){continue}if(i>mycarousel_itemList.length){break};
carousel.add(i,mycarousel_getItemHTML(mycarousel_itemList[i-1]));
}
};
function mycarousel_getItemHTML(item)
{
var img = new Image();
$J(img).load(function () {
// whatever you want to do while loading.
}).attr('src', item.url);
return "<li><img src=\"" + item.url + "\" width=\"770\" alt=\"\" /></li>";
}