Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Newbie seeking CSS / HTML5 help with image multi-select.

  • This topic is empty.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #178562
    TC
    Participant

    Hi everyone and thank you for your time in advance :)

    I am new to web development and I’m learning HTML5, CSS and php.

    I’m trying to learn how to do a multi select for an image gallery so the user can select multiple images which get highlighted then click a button to perform some action on the selected images.

    Is this possible to do using only HTML5, CSS and php?

    I have found a jQuery example on the internet but it’s beyond my understanding right now so I don’t know how to use it and I’m afraid of the dependency of the author’s jQuery. Who knows if one day it will disappear and break my gallery?

    Here is the free jQuery image select which does what I’m trying to but without being reliant on someone else’s code which I have no control over. The source code is offered for free but under MIT license which I don’t fully understand.

    I don’t need the text part of the image selecting, just multiple image selecting ability and then the ability to click a button to stuff to those selections.

    Scroll down where it allows you to select multiple kitties and it highlights them.
    It says”
    Selects Multiple
    Image Picker works great on select multiple elements too.

    http://www.jqueryrain.com/?gyktobVV

    #178591
    TC
    Participant

    Wow, thank you so much for your answer!

    I will purchase a book on javascript today. I already have one in mind.

    Also, may I ask you:

    Do I really need javascript for this?

    Couldn’t I use HTML 5 websockets?

    From what I’ve seen they can update realtime.
    Maybe the CSS used to highlight the image cannot update realtime and that requires javascript?

    Thank you.

    #178597
    TC
    Participant

    Hi.

    I just took a quick peek, I think you’re correct.

    Here’s a demo page for HTML 5 websockets:
    https://www.websocket.org/echo.html

    Here’s the sample working code, I guess this contains javascript:
    <!DOCTYPE html> <meta charset="utf-8" /> <title>WebSocket Test</title> <script language="javascript" type="text/javascript"> var wsUri = "ws://echo.websocket.org/"; var output; function init() { output = document.getElementById("output"); testWebSocket(); } function testWebSocket() { websocket = new WebSocket(wsUri); websocket.onopen = function(evt) { onOpen(evt) }; websocket.onclose = function(evt) { onClose(evt) }; websocket.onmessage = function(evt) { onMessage(evt) }; websocket.onerror = function(evt) { onError(evt) }; } function onOpen(evt) { writeToScreen("CONNECTED"); doSend("WebSocket rocks"); } function onClose(evt) { writeToScreen("DISCONNECTED"); } function onMessage(evt) { writeToScreen('<span style="color: blue;">RESPONSE: ' + evt.data+'</span>'); websocket.close(); } function onError(evt) { writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data); } function doSend(message) { writeToScreen("SENT: " + message); websocket.send(message); } function writeToScreen(message) { var pre = document.createElement("p"); pre.style.wordWrap = "break-word"; pre.innerHTML = message; output.appendChild(pre); } window.addEventListener("load", init, false); </script> <h2>WebSocket Test</h2> <div id="output"></div>

    OK, ordering the book now on my Kindle.

    Btw, can anyone give me pointers on how to do what I’m trying to do?

    Thanks.

    #178604
    TC
    Participant

    There also is nothing worn with using jQuery (plugins). You can just download the files, and use them on your server. That way the owner do as many changes as he’d like, you’re still using the same code from the day you downloaded it.

    I just reread what you wrote about using jQuery.

    Can I ask you if I understand you correctly?

    I can download his jQuery functionality and put it on my server and it never changes even if he changes his version? So my pages will only reference my local version ?

    If so that sounds cool. Maybe I should learn from his example and make my own?

    He’s got a lot more things in there than I need so I’d have to remove a lot of stuff then try to understand it, learn from it then roll my own and modify it so it works as I need.

    Would anyone be willing to help me?

    #178605
    Alen
    Participant

    user can select multiple images which get highlighted then click a button to perform some action on the selected images

    First. What action specifically needs to be performed? You haven’t really described what you are trying to accomplish. You might not even need jQuery plugin if it’s some simple functionality.

    I can download his jQuery functionality and put it on my server and it never changes even if he changes his version? So my pages will only reference my local version ?

    Yes. These are called jQuery plugins and it’s pretty much plug-and-play. The author/contributors make changes to the script making it better, then it’s up to you to update, only if you need to. That requires, re-downloading the code and uploading it to your server, overwriting the current script.

    Maybe I should learn from his example and make my own?

    He’s got a lot more things in there than I need so I’d have to remove…

    If you want to learn by deconstructing some of these plugins, then by all means do so. It’s the best way to learn. Once jQuery plugin is downloaded and included in your project, we usually don’t modify it.

    Would anyone be willing to help me?

    We would love to, just give us some detailed information on what exactly you’re after then we might guide you better.

    #178606
    TC
    Participant

    Hi Alen!

    Thank you for your reply.

    You wrote “First. What action specifically needs to be performed? You haven’t really described what you are trying to accomplish. You might not even need jQuery plugin if it’s some simple functionality.”

    Ok, I’m trying to do this :

    I have an image gallery which will display images. The images and number of images will change and is based on php code which grabs the images from a directory. I want to be able to click on any image(s) making them highlighted then click a button that will perform an action on those images:

    One button will be a move button which moves those selected images to a saved folder (directory).

    Alternatively another button would be a delete button which would delete the selected images.

    Things like that.

    Currently I’m learning php, HTML5, and CSS. I wasn’t sure if those 3 could dynamically select then highlight (border?) then perform a button click action on the selected images?

    Thanks guys for helping me out!
    This forum is way cool :)

    #178641
    Paulie_D
    Member

    The selection / highlight of clicked images is pretty easy with jQuery.

    It’s just a matter of the click adding a class (say .selected) which you can then style with CSS.

    The file movement or deletion is beyond my JS/JQ skills but it shouldn’t be that hard providing you have adequate security measures in place.

    #178740
    TC
    Participant

    Hi Paulie D.

    Thank you for your reply.

    I was reading my new Javascript book and came to the same conclusion about applying the class for the highlight, thank you for that confirmation.

    May I ask you, if I learn to code this using Javascript is there any reason I should use jQuery and not Javascript?

    For the file movement and deletion problems my initial thoughts are this:

    Once the user clicks on the image(s) :

    1. I highlight the image by applying the CSS class.
    2. I add the image’s ID to a Javascript array building the image list of selected images using document.getElementById.

    When the user clicks the action button:
    3. I use javascript to loop through the array of selected images and perform the file moving or deletion using php code on each array element (image).

    Does that sound like it would work guys or is there a better way?

    At some point I can probably post some code which would make it easier for you guys to help me!

    Thank you!

    #178746
    Paulie_D
    Member

    May I ask you, if I learn to code this using Javascript is there any reason I should use jQuery and not Javascript?

    None whatsoever…that said, JQ is pretty ubiquitous these days and can usually be coded with little effort.

    However, I think, most people would say, learn JS if you can.

    #178762
    garystorey
    Participant

    Once you have the images selected and you click a button (say the Delete button), you can fire off a jQuery AJAX request to call your php code passing along the name and location of the image to delete. PHP does the actual deletion. jQuery/Javascript tells PHP which images to delete. CSS styles the images so you know which are selected.

    This isn’t complete code (or even the best way just something off the top of my head) but with jQuery it would look something like this:

    var img;
    $(‘img.selected’).each( function( index, el ){
    img = $(el);
    $.when( ‘./delete.php?img=’+img.attr(‘src’) ).done( function() {
    img.remove();
    });
    });

    This code says:
    1) Find all the image tags with a class of selected and loop through them
    2) Call the delete.php for each image
    3) When the image has been deleted, remove the image from the html.

    Hope that helps.

    #180199
    TC
    Participant

    Hi guys. I’m having a problem here.

    I’m trying to have javascript pass the list of pictures ( an array) to the php script so the php script can process them.

    First question is:
    Can I pass this as an array or do I need to combine each element into one string and pass that?
    I’m currently trying to combine all the elements into a single string and am trying to pass it as $_POST but am having issues using:

    Javascript sending the list of picture names (later will be picture file paths).
    window.location.href = “http://www.somewebsite/test_php_receive_javascript_values.php?w1=&#8221; + allPics;
    // allPics is the one string of all the elements with a delimiter.
    I don’t think I’m forming the window.location.href line correctly.

    On the receiving php script using $_POST but it’s not working. Doing something wrong:
    No data received.

    $result=$_POST[‘w1’];
    echo ‘We received value 1=’.$result;

    Help please!

    LOL. Does anyone know how to correctly format this line :
    window.location.href = “http://www.somewebsite/test_php_receive_javascript_values.php?w1=&#8221; + allPics;

    Big thanks !
    Oh almost forgot to ask…

    Is there a way to send the picture names to the php script without having it load the php page?
    I’d like the gallery to keep showing while the picture names passed in the background without the user being aware of it.

    THANKS!

    #180274
    TC
    Participant

    Hi Gary thanks a lot.

    After reading your post again I’m looking into AJAX.

    Since I’m trying to avoid jQuery would you or someone else mind showing me how to do this in Javascript code ?
    (Passing some values from a javascript page to a php page to process them without having to reload the gallery page.)

    Meanwhile I’m reading up on AJAX on the web to see if I can figure this one out myself.

    Thank you.

    EDIT:

    I think I just figured it out. Am working on it.
    Would still appreciate any helpful hints / tips, especially for security.
    Like stuff to prevent people from hacking it or sending their own values causing problems or whatever.

    :)

    #180288
    TC
    Participant

    Thanks Gary for mentioning AJAX.

    I can now pass the variables from the javascript page and receive the string data back from the php page without reloading the gallery page! Figuring it out took a little work, probably about 5 hours but seems to be working beautifully now, thank you!

    Also would still appreciate any tips on security!

    PS. I don’t know how to delete my older posts so people don’t waste their time reading about issues I’ve solved?
    I’ve clicked the ‘Bury’ feature but I have no idea if that works or not.

    :)

Viewing 13 posts - 1 through 13 (of 13 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.