orion3dgames / gridder Goto Github PK
View Code? Open in Web Editor NEWA jQuery plugin that displays a thumbnail grid expanding preview similar to the effect seen on Google Images.
Home Page: http://orion3dgames.github.io/gridder/
A jQuery plugin that displays a thumbnail grid expanding preview similar to the effect seen on Google Images.
Home Page: http://orion3dgames.github.io/gridder/
Helo.
I need to use the event "onContent". I´m trying to identify de element: "data-griddercontent". But I can´t.
Te event has no argments, has it ?
Similar
function onContent (object) {
var id = object.id;
}
I appreciate any help that you can provide.
Hey dude,
Thanks for this amazing plugin, I have used it within a few sites and has been a great bit of functionality to add in. I have added Gridder to a Woocommerce site but when I switch products, the page jumps up. After hours of trying, I can not seem to break it down and resolve the issue. Would you have any idea?
http://www.steve-edgeshop.com/shop/
Thanks,
Matt
Hello,
I can't find the API reference to customize the plugin.
Where is it?
Thanks.
Is there a destroy method available?
Was wondering why you are using POST in the ajax call instead of GET.
Seems the post method doesn't work for me and get is working, so maybe make it a configurable thingie? :)
Great software! After about 7 pots of coffee, I have not been able to get thumbnails (http://codepen.io/srkimir/pen/mGbrf), popover/tooltips (http://www.dynamicdrive.com/dynamicindex5/stickytooltip.htm), or zoom (http://www.jacklmoore.com/zoom/) to work at the gridder-content (carousel level). I did get them all to work at the gridder-list level. Any words of wisdom?
I know this is a jquery only plugin. I am using gridder with angular. The 'expand template' (The expanding preview) of gridder includes buttons. However, these buttons do not propogate ng-click (similar to onclick, but calls a function in the controller instead - think mvc, view calling the controller) events at all. Seems to be a weird issue. $compile service provided by angular doesn't seem to work either
I'm quite new to JS. I am in school for it right now so I'm still learning. I am trying to use the gridder for my portfolio site which is mostly HTML and CSS with just a few JS features. I'm trying to use it in my Portfolio section. It's set up in a 3 element wide grid. Each element in the list is 33.3333% wide and looks just how I want it.
I have two main issues I cannot solve. First, when I click on the either of the left two list items in each row they cause the rest in the row to bump down to the next row. I cant figure out why.
And the next problem is after the sixth list item there is a gap created as if there is a invisible 7th list item even though the 7th is in the place where the 8th should go.
If any of this rambling makes sense and you can help that would be awesome.
When you close the expanded area, make it scroll back to original position.
Hi !
First of all, thanks for this GREAT plugin. I've been trying to do this in jQuery, and couldn't seem to do it...
Secondly, I know my issue has been solved (#43) , but the solution doesn't seem to work on my end...
The expander is at the right place in the code but it breaks the grid...
I tried some "float" hack here and there but can't get it to work...
Here is the website : dev.antoinesarrazin.com
(Go down to the portfolio and click on one of the first two items)
I'm using Pure CSS as a framework, but even stripping it down to CSS Media queries I can't get it to work.
If you have a solution, that would be awesome !
Thanks for great plugin!
I would like to fadein .gridder-expanded-content content after click. How can i achieve this?
Thanks!
For example bootstrap carousel controls dont work in the expanded area
Hello! Thank you for gridder.
There is one problem.
If I add items via ajax, expanding do not work for this items.
I think it's because gridder initialized only once and can not be changed.
/* CLICK EVENT */ _this.find(".gridder-list").on("click", function (e) { e.preventDefault(); var myself = $(this); openExpander(myself); });
This code is not called for added via ajax items.
Please help me.
Sorry for my English, I write through google translate.
I've copied min.js file, initialized plugin:
<script>
$(function() {
// Call Gridder
$('#gridder').gridderExpander({
scroll: true,
scrollOffset: 30,
scrollTo: "panel", // panel or listitem
animationSpeed: 400,
animationEasing: "easeInOutExpo",
showNav: true, // Show Navigation
nextText: "Next", // Next button text
prevText: "Previous", // Previous button text
closeText: "Close", // Close button text
onStart: function(){
//Gridder Inititialized
},
onContent: function(){
//Gridder Content Loaded
},
onClosed: function(){
//Gridder Closed
}
});
});
</script>
and this is my markup
<ul class="grd-6-noGutter-noBottom-equalHeight-center" id="gridder">
<li class="cl" data-griddercontent="#content1">
<img src="{% static 'img/articles/2.jpg' %}" alt="img01"/>
</li>
<li class="cl" data-griddercontent="#content2">
<img src="{% static 'img/articles/1.jpg' %}" alt="img02"/>
</li>
<li class="cl" data-griddercontent="#content3">
<img src="{% static 'img/articles/art_email.png' %}" alt="img03"/>
</li>
</ul>
<div id="content1" class="gridder-content">
<div class="row">
<div class="col-sm-6">
<img src="http://placehold.it/600x600" class="img-responsive" />
</div>
<div class="col-sm-6">
<h2>Item 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ex augue, hendrerit sed gravida ut, mattis vel tortor. Duis hendrerit sagittis bibendum. Fusce massa risus, hendrerit et est vitae, convallis accumsan ipsum. Integer vitae erat mattis, ornare tortor nec, luctus turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse finibus fermentum consectetur. Nulla vestibulum, diam ut finibus dictum, justo felis blandit mi, sed rhoncus tortor augue vitae orci. Fusce semper eu ante ut faucibus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ex augue, hendrerit sed gravida ut, mattis vel tortor. Duis hendrerit sagittis bibendum. Fusce massa risus, hendrerit et est vitae, convallis accumsan ipsum. Integer vitae erat mattis, ornare tortor nec, luctus turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse finibus fermentum consectetur. Nulla vestibulum, diam ut finibus dictum, justo felis blandit mi, sed rhoncus tortor augue vitae orci. Fusce semper eu ante ut faucibus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ex augue, hendrerit sed gravida ut, mattis vel tortor. Duis hendrerit sagittis bibendum. Fusce massa risus, hendrerit et est vitae, convallis accumsan ipsum. Integer vitae erat mattis, ornare tortor nec, luctus turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse finibus fermentum consectetur. Nulla vestibulum, diam ut finibus dictum, justo felis blandit mi, sed rhoncus tortor augue vitae orci. Fusce semper eu ante ut faucibus.</p>
</div>
</div>
</div>
<div id="content2" class="gridder-content">
<div class="row">
<div class="col-sm-6">
<img src="http://placehold.it/600x600" class="img-responsive" />
</div>
<div class="col-sm-6">
<h2>Item 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ex augue, hendrerit sed gravida ut, mattis vel tortor. Duis hendrerit sagittis bibendum. Fusce massa risus, hendrerit et est vitae, convallis accumsan ipsum. Integer vitae erat mattis, ornare tortor nec, luctus turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse finibus fermentum consectetur. Nulla vestibulum, diam ut finibus dictum, justo felis blandit mi, sed rhoncus tortor augue vitae orci. Fusce semper eu ante ut faucibus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ex augue, hendrerit sed gravida ut, mattis vel tortor. Duis hendrerit sagittis bibendum. Fusce massa risus, hendrerit et est vitae, convallis accumsan ipsum. Integer vitae erat mattis, ornare tortor nec, luctus turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse finibus fermentum consectetur. Nulla vestibulum, diam ut finibus dictum, justo felis blandit mi, sed rhoncus tortor augue vitae orci. Fusce semper eu ante ut faucibus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ex augue, hendrerit sed gravida ut, mattis vel tortor. Duis hendrerit sagittis bibendum. Fusce massa risus, hendrerit et est vitae, convallis accumsan ipsum. Integer vitae erat mattis, ornare tortor nec, luctus turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse finibus fermentum consectetur. Nulla vestibulum, diam ut finibus dictum, justo felis blandit mi, sed rhoncus tortor augue vitae orci. Fusce semper eu ante ut faucibus.</p>
</div>
</div>
</div>
<div id="content3" class="gridder-content">
<div class="row">
<div class="col-sm-6">
<img src="http://placehold.it/600x600" class="img-responsive" />
</div>
<div class="col-sm-6">
<h2>Item 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ex augue, hendrerit sed gravida ut, mattis vel tortor. Duis hendrerit sagittis bibendum. Fusce massa risus, hendrerit et est vitae, convallis accumsan ipsum. Integer vitae erat mattis, ornare tortor nec, luctus turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse finibus fermentum consectetur. Nulla vestibulum, diam ut finibus dictum, justo felis blandit mi, sed rhoncus tortor augue vitae orci. Fusce semper eu ante ut faucibus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ex augue, hendrerit sed gravida ut, mattis vel tortor. Duis hendrerit sagittis bibendum. Fusce massa risus, hendrerit et est vitae, convallis accumsan ipsum. Integer vitae erat mattis, ornare tortor nec, luctus turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse finibus fermentum consectetur. Nulla vestibulum, diam ut finibus dictum, justo felis blandit mi, sed rhoncus tortor augue vitae orci. Fusce semper eu ante ut faucibus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ex augue, hendrerit sed gravida ut, mattis vel tortor. Duis hendrerit sagittis bibendum. Fusce massa risus, hendrerit et est vitae, convallis accumsan ipsum. Integer vitae erat mattis, ornare tortor nec, luctus turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse finibus fermentum consectetur. Nulla vestibulum, diam ut finibus dictum, justo felis blandit mi, sed rhoncus tortor augue vitae orci. Fusce semper eu ante ut faucibus.</p>
</div>
</div>
</div>
Whenever i click any item it doesn't reveal hidden divs, there's no errors as well.
A good option would be to animate the closing of the open panel before opening the new one. Is this possible to add myself or does it need an update? I am not a programmer. Also could the open panel be closed by clicking on the body of the page? Apart from these points, excellent code.
Thanks
Would it be possible to use the keyboard arrows to navigate through the expanded sections?
I'm testing Gridder on a Wordpress theme I'm building for myself and it appears to block cmd R shortcut on Chrome. If I remove the script enqueue from my functions.php cmd R works again.
I can refresh via the menus and other keybaord shortcuts work. It's such a bizarre issue.
Any ideas?
What license is this code released under?
I'm trying to use the malsup cycle plugin dynamically inside each grid list entry. On clicking the pager items, there's a jump to the top of the page. Any ideas on how to overcome this? Is the preventDefault a conflict with the cycle plugin? Thank you for any help. Here's the test page:
I can set this up as html but wondering why your demo page needs to be written in php yet your setup etc. illustrates html? Is there a reason you don't have a simple html demo instead of having php? Just a suggestion.....
If we are at the start disable prev button, if we are at the end disable next button
Css is a mess at the moment. It works but they are no logic whatsoever.
Allow ajax content to be loaded
Hi,
I have a page, where li-elements are loaded in a gridder-ul and after that I initialize the gridder with $('.gridder').gridderExpander(....) for these elements -> is working correct.
If I now want to load more li-elements and append them to the gridder-ul it is not working anymore. If I re-initialize the gridder the new elements are working and the old ones not.
Any idea how this could be fixed?
I initialize it like following:
$('.gridder').gridderExpander({
scroll: true,
scrollOffset: 30,
scrollTo: "listitem", // panel or listitem
animationSpeed: 400,
animationEasing: "easeInOutExpo",
showNav: false, // Show Navigation
nextText: "Next", // Next button text
prevText: "Previous", // Previous button text
closeText: "Close", // Close button text
onStart: function(){
//Gridder Inititialized
},
onContent: function(){
//Gridder Content Loaded
var element = jQuery(".gridder-show");
initializeFullFlexslider(element); // custom function to initialize a flexslider within the gridder
},
});
I have different tabs on my webpage I want to be able to close the expander when I go to the another tab
how would I call the close function?
I haven't been able to make Owl Carousel work in the expanded area. Please check the first thumbnail: http://themes.iki-bir.com/gridder/demo/demo.html Could you help me figure out what is missing? (Owl Carousel works outside of gridder but not inside.)
Hi,
Sometimes expander appears at the bottom of the list instead of current place.
This is happening with Chrome but not with Safari and Firefox.
Here's the page : http://preview.littleboxes.fr/index.php?page=films
2 ways to reproduce the bug :
The DIV is placed at the good place in the HTML code but Chrome choose to draw it after all the LI elements.
That technique of using a DIV between 2 LI of a UL feels like an undocumented feature. Am I wrong ?
I noticed hot linking as a To-Do list item, and this is a feature I'd love. I tried tinkering myself but have run into a brick wall.
I've got it so it'll auto-pop the gridder panel open by doing the following:
$(window).load(function() {
index_position = document.URL.indexOf("#");
if(index_position != -1) {
anchor_name = document.URL.substring(index_position);
$(anchor_name).trigger("click");
}
});
Basically, I pass in the div ID of the item to be expanded as an anchor name in the URL and simulate a click of that panel after the Window has fully loaded. $(window).load occurs after all document ready jQuery functions complete. This works great, however, when I try to mix in a scroll-to, it can't navigate to the proper location on the page, as it is being "painted" in the browser dynamically.
Am I barking up the wrong tree? Did you have an ideas on how to get this working? I've tried a bunch of things and am now beating my head against the wall instead of issuing a useful P.R. :) Thanks for your work on a great plugin!
Why I cannot put Lists, Anchor Tags or similar is my expanding preview .gridder-show . content?
Hi
Using the callback function I have managed to integrate an accordion inside the gridder panel. Works very well. What I now want to be able do is use a jquery function that changes font attributes such as opentype features (kerning) etc. Inside gridder it isn't working but is if I place it outside.
Is there anything I need to be doing re. callback. Does it need to be inside a callback function within the accordion which is in itself inside the gridder callback. Apologies but I am not a programmer but am helping out a colleague and this is pushing my knowledge rather a bit. At least I am learning something.
Many thanks
Brian
Can you add the ability to target a specific element within the gridder list as the trigger to open the gridder content/show area?
Sorry to ask but iv been trying to get rid of the auto scroll effect in the js file.
But I'm not great at js (more hit and miss) i could see all the bits about scrollOffset b c j etc and was able to disable the scroll on clicking and opening but could not disable the closing scroll effect?
thanks I'm using Gridder - v1.4.2
Any advice would be greatly greatly appreciated.
Adding SCSS files.
Separating theme css to vital css
I had a problem today when trying to implement the plugin with a unorderd list that had a width of 100%. For some strange reason there was always a white border on my divs and the floating element kept pushing away my divs.
One of the solutions is to give the parent element a font-size of 0px and apply a font-size on the list-items.
The images only get smaller and smaller.
I fixed this by changing the width of the images to 220px for big screens and 140px for small screens instead of a percentage. Furthermore I centerend everything.
This is the part of the css file I changed:
.gridder {
margin: 0px;
padding: 0px;
list-style-type: none;
text-align: center
}
.gridder-list {
display: inline-block;
vertical-align: top;
width: 220px
}
@media screen and (max-width: 862px) {
.gridder-list {
width: 140px;
}
}
.gridder-show {
display: block;
text-align: left;
float: left;
width: 100%;
position: relative;
background: #EEE url("../images/loading-spin.svg") no-repeat center
}
Is it possible to show a certain block when opening the page? I have tried jQuery trigger, but this doesn't seem to do the trick.
How to get the current scope on gridder click
This is a nice viewer I'd like to use, however, it doesn't work for me in IE. Is this a known issue, and is there a fix?
This will allow to launch other plugins after expanded content is open
My organization uses IE9. Gridder does not start on page load. If you go into the developer tools and refresh it loads without issue.
Why not allow the expanded content to open at the same place each. (usefull when not many items)
Option could be :
start : Always opens on top of the list
after : Open as usual, just underneath the selected item.
end : Always opens on bottom of the list
I kept getting the error message id is not defined. This stopped the plugin from working.
Adding showNav, nextText, prevText, closeText options
Allow each expanded container to have a specific id or class once opened..
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.