Jump to content


  • Content count

  • Joined

  • Last visited

Everything posted by codebyren

  1. codebyren

    multiple toggle effect

    If the divs are siblings in the HTML then you can use the next() or nextall() method - something like this: $('.tricks_head').click(function() { var $tricks_head = $(this); $tricks_head.next('.trick').toggle('slow'); }); Updated demo here: http://jsfiddle.net/codebyren/AqSp2/1/
  2. codebyren

    multiple toggle effect

    Do you have control of the HTML mark-up? If so, you could try something like this: <div class="tricks_head"> <div class="trick"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, totam. </div> </div> <div class="tricks_head"> <div class="trick"> Ratione, maiores labore nulla atque recusandae repellendus est. Iusto, ut. </div> </div> With non-numeric classes for the divs, the JavaScript is fairly simple: $('.tricks_head').click(function() { var $tricks_head = $(this); $tricks_head.find('.trick').toggle('slow'); }); You can see a working demo here: http://jsfiddle.net/codebyren/AqSp2/
  3. codebyren

    Change Image using jQuery

    As long as you produce valid/usable JavaScript with your PHP output, you should be ok. If, like most people, you have JavaScript separate from your PHP and HTML then you could build an array of image URLs in PHP (after fetching from mysql) and then store this array as a JSON encoded data attribute. Something like this: Build the array... <?php $images = array('http://placehold.it/100x150.png', 'http://placehold.it/200x200.png', 'http://placehold.it/150x150.png', 'http://placehold.it/300x100.png'); ?> Add it to the markup (note the single quotes surrounding the data-image-list value)... <div id="product" data-image-list='<?php echo json_encode($images); ?>'> <ul id="controls"> <li><a href="#" data-action="prev">Prev Image</a></li> <li><a href="#" data-action="next">Next Image</a></li> </ul> <div id="imagediv"> <img src="http://placehold.it/100x150.png" alt="" /> </div> <p>This is some information about the product</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, itaque, eveniet quae sunt aperiam beatae!</p> </div> Then access the image array and use it in your JavaScript... $(document).ready(function() { var images = $('#product').data('imageList'); // Now you should have an array of images to work with... // ... }); Hope that helps...
  4. codebyren

    Change Image using jQuery

    I'm sure there is an existing slider solution that meets your requirements. I haven't tried it myself but Google found Sudo Slider with a dynamic height/width example here: http://webbies.dk/assets/files/SudoSlider/package/demos/autowidth%20centered.html As for your idea to manually change the image in a div, I've written a jsfiddle (code below too) so you can see how this could be done in jQuery. It might be a little involved if you have little or no jQuery/JavaScript experience but you'll have to hit the documentation sometime... <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Image Switch</title> </head> <body> <div id="container"> <div id="product"> <ul id="controls"> <li><a href="#" data-action="prev">Previous</a></li> <li><a href="#" data-action="next">Next</a></li> </ul> <div id="imagediv"> <img src="http://placehold.it/100x150.png" alt=""> </div> <p>This is some information about the product</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, itaque, eveniet quae sunt aperiam beatae!</p> </div> </div> <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script type="text/javascript"> $(document).ready(function() { // The images that we want to cycle through... var images = ['http://placehold.it/100x150.png', 'http://placehold.it/200x200.png', 'http://placehold.it/150x150.png', 'http://placehold.it/300x100.png']; // The links that cycle the images var $controls = $('#controls a'); // The image element var $image = $('#imagediv').find('img:first'); $controls.click(function(e) { // The prev/next links don't actually go anywhere... e.preventDefault(); // If for some reason there are no images... if ( ! images.length) return false; // The link that's just been clicked var $link = $(this); // Which direction to cycle the images var action = $link.data('action') == 'next' ? 'next' : 'prev'; // Find the position of our currently displayed image in the list of possible images var image_url = $image.attr('src'); var image_index = $.inArray(image_url, images); // $.inArray returns -1 if the item doesn't exist in the array to search // Calculate the position of the previous and next images relative to current image in the images array // (accounting for when the user hits "next" on the last image or "previous" on first image) var next_index = (image_index + 1 <= images.length - 1) ? image_index + 1 : 0; var prev_index = (image_index - 1 >= 0) ? image_index - 1 : images.length - 1; // Find the new image's URL using the images array var new_image = (action == 'next') ? images[next_index] : images[prev_index]; // Update the image element with the new image's URL $image.attr('src', new_image); }); }); </script> </body> </html>

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.