I am currently using the below code to load the jQuery masonry after all the images have loaded. It works great and as it should. However, if I am loading a large number of images it takes some time to show the masonry. I have tried multiple method to display a sort of loading image to show that the page is actually loading and is not just stagnant with no success. If anyone could please point me in the proper direction as to how to maybe use an if statement to check if the images are loaded. While they are not I would like to display the loading gif. Once they do load I would like to have the masonry appear.
var $container = $('#freewall').imagesLoaded( function() {
$container.isotope({
});
});
Sorry to over complicate a simple issue. But I greatly appreciate any help that I can get!
I would recommend to show each image individually as soon as it loads, instead of waiting for the complete set of images
in other words, your HTML would be something like this:
<div class="grid">
<div class="item"> <img src="test.jpg"> </div>
<div class="item"> <img src="test.jpg"> </div>
<div class="item"> <img src="test.jpg"> </div>
<div class="item"> <img src="test.jpg"> </div>
</div>
then with CSS hide your images, with something like this:
.item img {
display: none;
}
next initialize the grid with isotope:
$('.grid').isotope({
itemSelector: '.item',
percentPosition: true,
});
and finally show the images that are getting loaded individually with the help of imagesLoaded, like this:
$('.grid').imagesLoadedMB().progress( function(instance, imageObj) {
$(imageObj.img).fadeIn(300);
$('.grid').isotope('layout');
});
I personally I would prefer to use a plugin ready to use, like this one: https://codecanyon.net/item/media-boxes-portfolio-responsive-grid/5683020 which already deals with all of this for me
Related
I would like to make an image gallery that is similar to Google images gallery layout but I couldn't find any useful example to approach. I would like to show the larger image right below or above the image that is clicked using angularjs.
I started working on a plunker example but don't have any idea how to achieve this. I could able to display the image either on the top of all images or below all the images. Any thoughts on how to achieve this using angularjs and ui-bootstrap. Thanks in advance.
Plunker Link : https://plnkr.co/edit/IN65NEXKUDNFWIZeXDci?p=preview
View:
<div ng-controller="CollapseDemoCtrl">
<div ng-repeat="image in images track by $index">
<img src="{{image}}" ng-click="collapse=!collapse; setImage(image)" style="height:100px;width:100px;float:left;padding:20px;cursor:pointer">
</div>
<div>
<img uib-collapse="collapse" src="{{img}}"style="height:500px;width:500px;padding:20px">
</div>
</div>
You were nearly there. Only thing missing was to move the image inside the repeater.
Added this to your controller.
$scope.setImage = function(index){
$scope.visibleIndex = index;
}
And this to your markup:
<div ng-show="visibleIndex == $index"><br />
<img src="{{image}}" style="height:500px;width:500px;padding:20px">
</div>
I have updated your plunker:
https://plnkr.co/edit/IN65NEXKUDNFWIZeXDci?p=preview
I feel like this should be incredibly simple but am having unbelievable amounts of trouble implementing it.
I am using a Javascript plugin, Instafeed, to pull Instagram images into a page - this is working fine.
After the images have loaded, I want to take them and put them into a carousel.
I have a JSFiddle showing what is happening here.
What should be happening in the generated document is this:
<div id="instafeed" class="instafeed slick-initialized slick-slider">
<div class="slick-list draggable" tabindex="0">
<div class="slick-track" style="opacity: 1; width: 0px; transform: translate3d(0px, 0px, 0px);">
<div class="slick-slide">IMAGE IN HERE</div>
<div class="slick-slide">IMAGE IN HERE</div>
<div class="slick-slide">IMAGE IN HERE</div>
</div>
</div>
</div>
Instead, this is happening:
<div id="instafeed" class="instafeed slick-initialized slick-slider">
<div class="slick-list draggable" tabindex="0">
<div class="slick-track" style="opacity: 1; width: 0px; transform: translate3d(0px, 0px, 0px);"></div>
</div>
<div>IMAGE IN HERE</div>
<div>IMAGE IN HERE</div>
<div>IMAGE IN HERE</div>
</div>
Essentially, the carousel seems to be loading before or at the same time as Instafeed and so it never 'sees' the images inside the container and they end up not nested properly and not having classes applied. So it appends its classes (slick-initialized and slick-slider) to the parent container and doesn't format any of the children correctly.
I have tried placing the Instafeed script in the head and starting it on window load. This makes no difference.
Is there a way I can make the carousel only load when the Instagram photos have loaded? Or is this not possible without building callbacks etcetera into the plugins themselves? Is there a simple way to do this? Any help would be appreciated!
Use after (called when images have been added to the page) callback
var feed = new Instafeed({
get: 'user',
userId: 3722752,
accessToken: '3722752.467ede5.edc5948480384f54915ea14617ce6716',
template: '<div><img src="{{image}}" /></div>',
after: function () {
$('.instafeed').slick({slidesToShow: 3});
}
});
Example
There are a couple of things that you need to do. First, you need to use the "after" callback function when setting up your Instafeed. This ensures that the slick carousel is initiated only after your Instafeed images have loaded.
Second, you need to use the "target" option so that the images are loaded into the container that will be used to create the carousel.
var feed = new Instafeed({
target: 'instafeed'
after: function() {
$('#instafeed').slick({
slidesToShow: 3
});
}
});
Additionally, you need to include the slick CSS file, which wasn't present in your jsfiddle. Working example in jsfiddle: http://jsfiddle.net/L0zpwebz/3/
Before posting here i was testing over 30 or so Jquery image plugins to make my images appear full width when clicked on.
the structure of the HTML is as follows:
<div class="whatever">
<img id="noonecares" src="pff"></img>
</div>
and not
<img ></img>
I'm not talking about zooming in the photos but displaying the whole image onclick instead
I'm looking for a Jquery solution preferably.
The solutions that i've been looking into are: zoomfancy easyzoom ajaxzoom ...
Thank y'all
If you just want a simple inline image expander then jQuery's toggleClass() is perfect for that. You shrink the images to a fixed size with CSS and then toggle it with a click.
DEMO
Something like
<div>
<img src="http://t1.gstatic.com/images?q=tbn:ANd9GcRvA_rqizvEgVJhJwLbpgMz7CgGwnjW5BlXHrBNzRwRXsq7O3Gi" />
</div>
script
$("div").on("click", function() {
window.open($("img").attr("src"), "_blank", "menubar=1,resizable=1");
});
?
jsfiddle: http://jsfiddle.net/chrisbenseler/6GW6M/
This is my approach.
<div class="whatever">
<img id="noonecares" src="http://imagizer.imageshack.us/v2/100x75q90/21/0ss1.jpg"></img>
</div>
Script
$('.whatever').on('click','#noonecares', function(){
window.open($(this).attr('src'));
});
JSfiddle: http://jsfiddle.net/hFp6z/
UPDATE: If you want a plugin to zoom full size, then you can check fancybox or lightbox.
Plugin portfoliojs was my choice for creating a carousel-style portfolio. However, I have discovered that there is no zoom functionality built into the plug in. Due to relative complexity of the jquery code, I am at a loss how to manually add zoom (more precisely, fancybox) functionality to the gallery. The "lightbox=true" initialization option merely dims the other images in the gallery, but does not zoom the image of choice.
Ideally, I would like to add fancybox functionality to my gallery, e.g. my html would look like this:
<div id="gallery">
<img src="someimage.jpg></img>
<img src="someimage2.jpg></img>
</div>
However, the gallery in portfoliojs only works when is child element of ( with no level in between):
<div id="gallery">
<img src="someimage.jpg></img>
<img src="someimage2.jpg></img>
</div>
I have tried to wrap the <img>elements into <a> but it did not work.
Is there a way I could combine the functionality of two plugins ( portfoliojs and fancybox) without significant code rewriting? What would the alternative be?
This is what I would do.
Having an html like this :
<div id="gallery">
<img src="images/01.jpg" alt=""/>
<img src="images/02.jpg" alt=""/>
</div>
where src attribute points to the image to be shown in fancybox, use this code :
var images = [];
$("#gallery").find("img").each(function(i){
images[i] = $(this).attr("src");
$(this).bind("click", function(){
$.fancybox(images,{
index: i
});
})
});
See JSFIDDLE
NOTE: You could use .on() (preferred) instead of .bind() :
$(this).on("click", function(){ ...
it requires jQuery 1.7+ though. See updated JSFIDDLE
So I am designing a website, and I want to be able to have each companies logo via an Image called via XHTML 1.0 Transitional fade in upon mouseover and fade out when no longer mousing over. I have jQuery installed and what not, I just don't know the code to this for each image or one image alone. I don't know JavaScript and or jQuery.
Thank you very much for future answers (and possible explanations),
Aaron Brewer
You need a container for each image, otherwise there will be no element to trigger the mouse over when the image has faded out.
HTML
<div class="img-container">
<img src="a.jpg" alt="a" />
</div>
<div class="img-container">
<img src="b.jpg" alt="b" />
</div>
<div class="img-container">
<img src="c.jpg" alt="c" />
</div>
jQuery
$('.img-container').each(function() {
// Get a reference to the image.
var img = $(this).find('img');
// Hide by default.
img.hide();
$(this).hover(function() {
img.stop().fadeIn(500);
}, function() {
img.stop().fadeOut(500);
});
});
perhaps this little live demo will get you in the right direction as it uses both CSS3 and jquery to do the fading, so if one fails, the other can take over. http://jsfiddle.net/robx/jrnFj/2/