jquery isotope boxes hang - snap in place after resizing window? WordPress
- REFUNDED
<strong>Edit - found the solution with a little help from the plugin author. </strong>
I am working on this site - REMOVED - and if you scroll down to the "social timeline"-part, you can see the problem as soon as the timeline loads. I had to change the size of the instagram-boxes with css, and I suspect that is the problem, since the plugin (DP SocialTimeline) loads the same width for all kind of posts.
Then, if you resize the window just for a moment, all the boxes snap into place the way I want them to be from the start.
Can anyone help me solve this?
------------------------------------
<em><strong>The solution:
</strong></em>
I had to edit the jquery.dpSocialTimeline.js-file in three places:
1 - Find
$('.dpSocialTimeline_item', outputOptions.$div).width(this.settings.itemWidth);
and add these two lines below it
$('.dpSocialTimeline_item.instagram', outputOptions.$div).width(200);
$('.dpSocialTimeline_item.instagram', outputOptions.$div).height(240);
2 - find
$('.dpSocialTimeline_item', outputOptions.$div).width(me.settings.itemWidthOrig);
and add the same two lines below it
$('.dpSocialTimeline_item.instagram', outputOptions.$div).width(200);
$('.dpSocialTimeline_item.instagram', outputOptions.$div).height(240);
3 - find
$('.dpSocialTimeline_item', outputOptions.$div).width(me.settings.itemWidth);
and add the same two lines below it
$('.dpSocialTimeline_item.instagram', outputOptions.$div).width(200);
$('.dpSocialTimeline_item.instagram', outputOptions.$div).height(240);
Note that those three lines you search for are not identical, they are slightly different. I also had to add 40px extra to the height to get the correct vertical spacing between the pictures, and I still had to shrink/fit the images through css. Also - I used the "timeline"-setting, which shows as "spineAlign" in the code, so if you use a different setting, you will probably have to add these lines in some different places, but it should be very similar.
Answers (3)
Yakir Sitbon answers:
You are need put isotope code in $( window ).load( function() { } );
Torstein Opperud comments:
I thought so, probably in here somewhere, but where...? http://test.inkdrinks.com/wp-content/plugins/dpSocialTimeline/js/jquery.dpSocialTimeline.js?ver=1.4.6
Yakir Sitbon comments:
In the body.. this line: jQuery("#dp_timeline_id78184495").dpSocialTimeline({
Just put this block in load jQuery.. ok?
Torstein Opperud comments:
That code is generated by/from the .js-file I linked to...
Yakir Sitbon comments:
No. It is from PHP code.
It is need puted in "wp_footer" action.. or some other..
Torstein Opperud comments:
Alright, we are onto something... found the right part in one of the plugin files. Now it looks like this, but its not working (as you might have guessed, my js/jqueryskills s**k...)
<script type="text/javascript">
$( window ).load( function() {
// <![CDATA[
jQuery(document).ready(function() {
jQuery("#dp_timeline_id1222999916").dpSocialTimeline({
feeds:
{
"facebook_page": {data: "5550296508", limit: "5"},
"flickr": {data: "52617155@N08", limit: "5"},
"tumblr": {data: "drinkyourjuice", limit: "5"},
"instagram_hash": {data: "norway", limit: "5"}
},
custom:
{
},
layoutMode: "timeline",
addColorbox: 1,
showSocialIcons: 0,
showFilter: 0,
showLayout: 0,
showTime: 1,
share: 0,
total: 10,
itemWidth: "200",
timelineItemWidth: "435px",
columnsItemWidth: "",
oneColumnItemWidth: "",
skin: "light",
lang_week: "week",
lang_weeks: "weeks",
lang_day: "day",
lang_days: "days",
lang_hour: "hour",
lang_hours: "hours",
lang_minute: "minute",
lang_minutes: "minutes",
lang_about: "about",
lang_ago: "ago",
lang_less: "Less than a minute ago",
nonce: "dp_timeline_id1222999916"
});
});
//]]>
} );
</script>
Yakir Sitbon comments:
Try this:
<script type="text/javascript">
// <![CDATA[
jQuery(document).ready(function() {
jQuery( window ).load( function() {
jQuery("#dp_timeline_id1222999916").dpSocialTimeline({
feeds: {
"facebook_page": {data: "5550296508", limit: "5"},
"flickr": {data: "52617155@N08", limit: "5"},
"tumblr": {data: "drinkyourjuice", limit: "5"},
"instagram_hash": {data: "norway", limit: "5"}
},
custom: {},
layoutMode: "timeline",
addColorbox: 1,
showSocialIcons: 0,
showFilter: 0,
showLayout: 0,
showTime: 1,
share: 0,
total: 10,
itemWidth: "200",
timelineItemWidth: "435px",
columnsItemWidth: "",
oneColumnItemWidth: "",
skin: "light",
lang_week: "week",
lang_weeks: "weeks",
lang_day: "day",
lang_days: "days",
lang_hour: "hour",
lang_hours: "hours",
lang_minute: "minute",
lang_minutes: "minutes",
lang_about: "about",
lang_ago: "ago",
lang_less: "Less than a minute ago",
nonce: "dp_timeline_id1222999916"
});
} );
});
//]]>
</script>
Torstein Opperud comments:
Still not working :(
Yakir Sitbon comments:
It's need to work, so I don't know why not. :\
Sabby Sam answers:
http://stackoverflow.com/questions/15554798/jquery-masonry-isotope-and-fluid-images-momentary-overlap-on-window-resize
Torstein Opperud comments:
Hmmm... that seems like the opposite problem? Currently - if I resize the window, everything changes to the way it should be, but I dont want to have to resize the window.
Sabby Sam comments:
Hi,
Really I am little confused with the question. Could you be more specific please. According to me if your images are not re sizing then you have written code in css with fixed width and height. Here it is
div.dpSocialTimeline.isotope div.dpSocialTimeline_item.instagram.isotope-item div.dpSocialTimelineContent a.img_link.addColorbox.cboxElement img.item_thumb {
height: 177px;
width: 177px!important;
margin-top: 0!important;
}
If you change with width:100% and height:100% should work.
If you add extra code like max-width:400px; and max-height:400px;
It should not go outside the loop.
This what I am understanding. Let me know how I can help you.
Torstein Opperud comments:
The css works fine, but it seems like jquery keeps using the original size (425px height+width, if I remember correct) instead of picking up my "new" sizes, not until you resize the window, then the instagram-boxes suddenly move to the correct positions.
If you go to [[LINK href="http://test.inkdrinks.com"]]the test site[[/LINK]], and scroll down to "the social ink", the timeline will first look [[LINK href="http://f.cl.ly/items/1l2j1F123m3B0v472c39/Skjermbilde%202013-08-07%20kl.%2014.54.33.png"]]something like this[[/LINK]]
Then, if you resize the window just a little bit, suddenly everything becomes [[LINK href="http://f.cl.ly/items/442h1M3X3Y180E3d362o/Skjermbilde%202013-08-07%20kl.%2014.57.04.png"]]as it should have been from the start, like this[[/LINK]]