0

I am adding fancybox to the product gallery on Wordpress. I am using the product title as id name for hidden div and href of the thumbnail link. Product titles have spaces in them and that breaks the fancybox.

Solutions I found online only refer to the whitespace in between html elements, and my javascript/regex knowledge is not good enough to derive solution from there.

Here is the code I use to generate the product thumbnails and images:

<div class="entry-post-thumbnail">
            <a class="size-<?php echo $image_size;?> fancybox" href="#image-<?php the_title(); ?>"><?php the_post_thumbnail($image_size); ?></a>
            <div id="image-<?php the_title(); ?>" style="display: none;">
                <?php the_post_thumbnail($post->ID,'full'); ?>
            </div>
</div><!-- .entry-post-thumbnail -->

and here is the outputed code:

<a class="size-product fancybox" href="#image-Product three">
    <img src="[###]/wp-content/uploads/2013/06/product-thumbnail.png" class="attachment-product wp-post-image" alt="Product thumbnail" height="222" width="166"></a>
<div id="image-Product three" style="display: none;">
    <img src="[###]/wp-content/uploads/2013/06/product-thumbnail.png" class="attachment- wp-post-image" alt="Product thumbnail" full="" height="222" width="166">               
    </div>

Any help will be much appreciated!

Daniel Gimenez
  • 18,530
  • 3
  • 50
  • 70
Bojana Šekeljić
  • 1,056
  • 1
  • 12
  • 30
  • One solution in javascript with jquery is: $('.size-product').each(function() { var id = $(this).attr(); id = id.split(" ").join(""); $(this).attr('id', id); }); – Wilker Iceri Jun 26 '13 at 02:16
  • Your question title mentions javascript but there is none in your examlpe, and it seems logical to fix the id the php portion. Can you be specific where you need the fix? – Daniel Gimenez Jun 26 '13 at 02:23
  • @DanielGimenez when generates the title it is outputed with spaces, as titles entered usually have them. I need a way to remove the spaces from the title once they are generated. Thanks – Bojana Šekeljić Jun 26 '13 at 02:35

1 Answers1

1

use preg_replace

<div id="image-<?php preg_replace('/(\s/', '', the_title()); ?>" style="display: none;">

A better regex would be [^A-Za-z0-9\-_:.]. This matches all invalid characters for an html ID according to What are valid values for the id attribute in HTML?.

Community
  • 1
  • 1
Daniel Gimenez
  • 18,530
  • 3
  • 50
  • 70