Databases
StackOverflow2013
Postsdbo
POswitch selected image with jquery
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POswitch selected image with jquery
    primarykey
    data
    text
    <p>I've got this codepen - </p> <p><a href="http://codepen.io/sturobson/pen/3f1cd0077301489290d9e5a6e40077b7" rel="nofollow">http://codepen.io/sturobson/pen/3f1cd0077301489290d9e5a6e40077b7</a></p> <p>When you select an image write some text and click 'preview' a lightbox with the image and text comes into view.</p> <p>My problem is if the user then closes the lightbox and selects a different image then both images appear. I don't want to remove the text/image on closing the lightbox (which'd be the easiest option).</p> <p>Also I've noticed that if you click the select button a few times it 'breaks' and gives a blue background w/ the word select. Not sure how to fix that.</p> <p>Any help would be really appreciated.</p> <p>Thanks in advance.</p> <p>edit, adding code (apologies for not doing this to start with)...</p> <p>The code to add a class to the selected image, this gives a blue background to the word 'select' and clones the image into a different div</p> <pre><code> $('.selectable-image').on("click", function() { $('.selectable-image.selected').removeClass('selected'); $(this).addClass('selected'); $(".previewimage img").remove(); $(".selected &gt; img").first().clone().appendTo(".preview-image"); return false; }); </code></pre> <p>This code changes the word to select or selected depending on clicking </p> <pre><code> $('.selectable-image').on("click", function() { $('.select-photo', this).text(function(_, oldText) { return oldText === 'SELECTED' ? 'SELECT' : 'SELECTED'; }).parent().siblings().find('.select-photo').text(function(){ return $(this).data('text'); }) return false; }); </code></pre> <p>With these two I need to figure out how to change remove the 'selected' class if I click the same element twice. Also I want to swap the image appended if I click one then click a different one, removing the first image and replacing it with the new selection.</p> <p>I hope that makes sense on a Sunday morning.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USStuart Robson
    1. USStuart Robson
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COQuestions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — **in the question itself**. See http://SSCCE.org for guidance.
      singulars
      1. POswitch selected image with jquery
      1. UST.J. Crowder
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload