Member Avatar for bkjfdghiuds

im using a wordpress plugin called photospace. it works great except images always seem to stack up on top of each other. [image here] i edited the css file thinking it was a padding issue but it didnt work. i looked though the javascript file too but i dont see where the problem is coming from. any guesses?

php file
css file
js file

  • 3 Contributors
  • 2 Replies
  • 224 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by jackbauer24

Dani AI

Generated

Quick summary: when gallery images all "stack" in the same spot it usually means either (A) the plugin is positioning each image absolutely at the same coordinates and the JS that should hide/display or arrange them never ran, or (B) theme CSS is overriding the plugin layout. The fastest diagnostic is to open DevTools, inspect one of the overlapping images, and check the computed position, top/left, and display values and the browser console for JS errors.

Practical steps to find and fix it:

  1. Inspect one overlapping image in DevTools. If position: absolute and identical top/left values appear, the JS layout/visibility code did not run.

  2. Check the console for errors and for jQuery conflicts. In WordPress $ may be unavailable; run plugin init inside the WP-safe wrapper:

    jQuery(document).ready(function($){
  // safe place to re-run or init gallery code
});

  3. Try a quick CSS override to force a normal flow layout (test in inspector before saving):

    .gallery .thumb {
  float: left;
  display: block;
  margin: 6px;
  max-width: 200px;
  height: auto;
}
.gallery:after {
  content: "";
  display: table;
  clear: both;
}

  4. Look for duplicate IDs (each item should use classes or unique IDs). Also confirm the plugin’s JS files are actually loading and not blocked/minified out of order by other plugins.

  5. If the plugin uses a JS layout library (masonry/isotope), ensure that layout runs after images load; otherwise the grid can collapse into overlapped items.

Notes on replies: — building your own can work, but correct selector usage is $('#id') or jQuery('#id') and remember the WP noConflict wrapper. — max-width is useful; prefer floats/inline-block plus a clearfix for thumbnails instead of positioning each image manually.

Quick checklist before editing files: experiment in the inspector, clear caches, test by disabling other plugins, and back up the site.

Recommended Answers

All 2 Replies

Member Avatar for dany12

My personal opinion is to create your own image gallery with jquery ,you replace $('div id ') with jquery('div id') and include you js file in your wordpress template.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.