Discussion on jQuery Responsive Grid Quote

Discussion on jQuery Responsive Grid Quote

Cart 149 sales

sike does not currently provide support for this item.

18 comments found.

can i use it with tumblr ?

Hi sorry right now it’s in HTML/jQuery, you may have to customize the code if want to use it in tumblr.

There is a glitch with the hover effect on the thumbnail, I made a video of it as well:

how can i use it can you tell me please, i wish i can add testimonials on my web site( i use html and css only) do i need some js script to add and how it will slow down the page.


1) what is the initial code in your script, called: “ what does it do? Do you see it when posted online? Can I remove it without removing code to operate this feature?

2) I really like this program – ease to work with, good product and nice features. I would recommend to others.

Thanks, and look forward to your reply.

...funny, the code didn’t show, in the above comment I posted: it was the part of your code that was called div class “popover top”...


1) Can I upload my own list of quotes? 2) Can these custom quotes then be scheduled to auto populate in a designated area on a daily/weekly/refresh basis?

Thank you.

Just purchased the script. Some things are not working and we have other issues we hope to resolve soon:

#1. Turn off autoscroll/slideshow, We made changes in the “jquery.gridquote.js”, but it’s not working. The other .js files are very cluttered and we’re not sure if these files are correct for editing.

#2. How do we keep the thumbnail shown after we click on it. For example, Thumbnail 4 (top row) – when hover over, it shows “Dororthy Parks”. Can it change back to thumbnail when we click on it? This way we can show the thumbnail with the drop-down text.

#3. Can we choose which Thumbnail to show drop-down first when page loads? For example, we would like thumbnail 4 (top) to show first… Instead of thumbnail 1 (top).

#4. Can we disable certain thumbnails. For example, Thumbnail 1,2,3 (on top row) we would like them to have no rollover, or drop-down capabilities.
Thanks for the prompt reply…

Hi, you can change the js file location in the html, we use the minified file here, you can change it to jquery.gridquote.js. Then you can see the effect the changes.
2, 3, 4, try to customize it in the jquery.gridquote.js too, you can remove state change when user clicking etc.

hey Sike. Thanks for that. I need a little more insight on 2,3, and 4. maybe you can help us out here? For example: How can we make image #4 be expanded first. Or can we make none of the images expand.

How can we disable images?

How can we have images show once that cell is expanded (instead of the title)....

The index.html is not that simple to understand this.

Thanks for your help.

Update!! I found a simple work around for 3 and 4.
However for #2. I really need your help:

I’ve created two avatars for each “tab”. One in b/w and the other in color. I want each tab to be in default state of b/w until it is “Active”.
Active=user clicked on the “tab” and it shows drop down text.
When active, the image will show in color.
When not active, tab will return to it’s normal state.

Also note: the Text in each tab will be completely removed.

Can this be done? / how?

Thanks for your help…

Sometihing like:
on:hover show avatar-color.png
on:click – show avatar-color.png
on:rollout – show avatar-bw.png

Love everything about this except the requirement to click on the opening thumbnail to close an open container.

I’d like a more intuitive cue than the explicit instruction “click the open thumbnail to close it”. A simple “X” icon, either at the bottom right corner of the thumbnail or the top right corner of the open container would do the trick and improve the UX.

I like to think I could figure out the JS but what would take me all day would take someone who knows what they are doing 5 minutes…

Any suggestions?


the readme file says I need to insert the following line: <script src=”js/jquery.gridquote.js” type=”text/javascript”></script>

But the same readme file says also this: Please don’t upload the un-minify js files in the js folder under source folder. For example please don’t upload the jquery.gridquote.js.

So can you tell me what i need to do?

Hi there – very nice piece of code. Quick question – if I wanted to set the thumb containers to a percentage width can I get the overlay to match that size? Thanks.

. . . and as soon as I asked I answered my own question . . . feeling dumb

Hi there!

I’m wondering why I can get the Thumbnail TRIANGLE to show on my boxes. I think it’s an important part of the design off it. Can you help? Thanks.

before purchase i would like to double check that it is able to display to the top instead of the bottom of the thumbnail as the demo shows..

Now it’s available for WordPress:
Responsive Grid Quote for WordPress

I’m using this on a one-pager website and having a problem. I put this Javascript near the bottom of the HTML page. Every time I load the site, it auto scrolls to bottom where the responsive grid is. How do I disable the auto scrolling when the site is first loaded?

Hi yes. :)

Thank you! Awesome code!

You’re welcome. And I appreciate if you can rate my item, thanks.

I was this close to buying this, but then I tested it on an actual smartphone, and realised the responsive layout isn’t really working?

See, the grid layout acts perfectly responsive in my desktop browser, when I resize the window. The boxes rearrange themselves nicely, all the way down to a single-column view.

However, I then tried the demo page on an iphone 4s and a samsung galaxy S2. On both phones, the grid does not rearrange itself on screen rotation at all. The whole page merely zooms itself out! I further tested it in xcode ios simulators, and the responsiveness doesn’t seem to work in any version iOS.

It’s a nice script otherwise, and I was looking for something exactly like it, but this glitch is a dealbreaker for me. I hope you look into it, because what’s the point in having a responsive layout if it doesn’t work on touchscreen phones?

Hi, the responsive one column will be available after you set the viewport in the HTML.
<meta name="viewport" content="initial-scale=1">
I just don’t like it and don’t put it in the demo. Just add the line to your HTML and it’ll work. :)

Hi, Thanks for the quick response! I purchased it now and tried that. It works well in the android browser, but it’s acting up strangely on iphone. On vertical view it’s ok (single column) but on horizontal view the page gets unnecessarily oversized, out of view? Take a look:

Any idea how to fix that?

every time the slide changes, it also scrolls down to where ever the grid is. Is there a way to let the slides change but not scroll/focus onto the grid? Please help.

thanks so much sike! this is a wonderful terrific script and looks really smart on a website. I appreciate it a lot! great job, and great code.

does autoscroll deal with it changing into the other slides? because setting that to false didn’t stop it from auto switching into the other slides. I’d like it to just stay open. there are too many moving elements on the page already.

yea i cant get the slide show to turn off, even with slideshow:false

Hi, i have just purchased it, but i can´t install it in wordpress, by uploading the .zip file. How can i do it?



Hi, this item is HTML/JS only right now, the WordPress version is under developing.

Nike work sike! :)

Before I purchase, is there a way to stop the slides from automatically changing?


Hi yes, you can just set the slideshow to false in the plugin.


Tell us what you think!

We'd like to ask you a few questions to help improve CodeCanyon.

Sure, take me to the survey