[Plugin: Instagram for WordPress] Only 1 instagram photo is displaying.

Hi, @new2dascene!

These lines must be added to your theme’s style.css file. Don’t need to replace any line of code, just insert these two lines at the end of your stylesheet.

Cheers!

Hi !

I try solution of @bsfajardo and @jimolina :
CSS + wpinstagram.php

My animation doesn’t work.

One image is showing.

Please help… ??

https://www.queen-s.com/

Hi, @liloubond.

For some reason (maybe instagram plugin configuration) all of your instagram
<li> elements (representing each individual photo) is using absolute positioning, and a lot of them is hidden (display: none).

I don’t know why your gallery is showing like that, but take a look at this site where the same plugin was used, showing several photos at the same time: https://www.chamomila.com.br/

I hope that helps!

You have to do a few things to make this work…

Lets start with the wpinstagram.php file:

Step 1: Comment out or delete the following (This is the cycle effect javascript and the one that uses absolute positioning on the list item elements)…

wp_enqueue_script("jquery.cycle", $this->wpinstagram_path."js/jquery.cycle.lite-1.5.min.js", Array('jquery'), null);

Step 2: Change this…

echo '<ul class="'.$cls .'" style="width: '.$imagesize.'px; height: '.$imagesize.'px;">';

To This (This removes the sizing from the element and allows to go full width and height…

echo '<ul class="'.$cls .'">';

Step 3: Comment out or remove this function (It is not needed since we are removing the cycle effect…

<script>
jQuery(document).ready(function($) {
	$("#<?php echo $this->id; ?> ul").cycle({fx: "fade", timeout: <?php echo $cycletimeout; ?>});
});
</script>

Now on to the wpinstagram.css file:

Replace the ul.wpinstagram li class with the following. (Tweak as needed for your application.)

ul.wpinstagram li{
	width: 75px;
	height: 75px;
	float: left;
	clear: right;
	padding: 5px !important;
}

That should do it. Now the images should display in a grid rather than a single image with the fade in/out effect.