Is there anyway I could use some kind of plugin like NextGEN Gallery in my image radio buttons field?
http://www.customwindowcushions.com/custom-window-seat-cushions/rectangle-window-seat-cushions
Is there anyway I could use some kind of plugin like NextGEN Gallery in my image radio buttons field?
http://www.customwindowcushions.com/custom-window-seat-cushions/rectangle-window-seat-cushions
Not sure if this helps, but I know you can use a lightbox plugin for them, so when clicked they can open larger versions in a lightbox. Not sure though if that is your goal here.
Lightbox will do the trick. Any direction on how to do this? Does it automatically pick up that its an image or do I have to customize some stuff (haven't used Lightbox in a long time)?
You would just need to wrap your choices appropriately, for example you could have something like this in the field option:
<a href="large-image.png" title="Large Image" rel="lightbox value"><img src="small-image.png" alt="Small Image" /></a>
Obviously there are tons of lightbox plugins out there, so each one has it's own unique way of getting fired off.
Would there be a way to keep a "selected" CSS border class on this still? Like now my images just have a border when I click them..
Yeah, the CSS rules should still apply there - it would just also pop a lightbox in tandem.
Sorry I attempted to mess with it but need a little direction still.. The item page (form) is below (first link). I want the fabrics to work with Lightbox.. Here is a page I put some fabrics through the Wordpress gallery to show you some not in the form using Lightbox (second link below)
oops forgot the links sorry...
http://www.customwindowcushions.com/custom-window-seat-cushions/rectangle-window-seat-cushions
The lightbox is firing with this on that page:
<script type="text/javascript">
// <![CDATA[
jQuery(document).ready(function () {
jQuery(".gallery1 a").lightBox({captionPosition:"gallery"});
});
// ]]>
</script>
That means, it's looking for any anchor element within the element with a class of .gallery1 to fire the lightbox when clicking the anchor.
In this instance, you would need to write something similar for the forms page to target your list of fabrics. First you would need to link the fabric images using anchor elements inside the form builder. Then you could target those with something like this (#input_3_8 is the ID of your radio field that has the fabrics on this form):
<script type="text/javascript">
// <![CDATA[
jQuery(document).ready(function () {
jQuery("#input_3_8 a").lightBox({captionPosition:"gallery"});
});
// ]]>
</script>
So, since im not too familiar with Javascript or jQuery (I understand whats going on there but that's about it) could you direct me to where I put that code for that page and I could just plug in those directions for the other pages? :) Once again thanks for the help!
Okay I changed the plugin to Easy FancyBox and got it to work but the radio checked (when selected) CSS doesn't apply after the lightbox opens and you close it. On the link below I changed the bottom 3 images in the fabric box to links (so they use lightbox) and the top 3 are just images so they don't use it but work with the selected border CSS. Can someone please tell me what im missing? Thank you
http://www.customwindowcushions.com/custom-window-seat-cushions/rectangle-window-seat-cushions#
Hmm, looks like for this particular combination of styles to work with lightbox you may need to use checkboxes next to each swatch to signify the selector instead. I haven't messed around with it enough to this degree, but maybe someone else will chime in with their experiences.