Jump to content


codebyren

Member Since 12 Oct 2007
Offline Last Active Private

Posts I've Made

In Topic: multiple toggle effect

21 April 2014 - 05:46 AM

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/


In Topic: multiple toggle effect

20 April 2014 - 07:49 AM

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/

 


In Topic: Change Image using jQuery

29 December 2013 - 01:04 AM

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...

 


In Topic: Change Image using jQuery

23 December 2013 - 08:17 AM

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/as...h centered.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>

In Topic: Create flickr url from simplexml

21 October 2013 - 05:35 AM

Firstly, you are trying to access an attribute called "farm" as "farm-id" and "server" as "server-id".  You probably want :

$set['farm']

and not:

$set{farm-id}

Likewise with server vs server-id.

 

Then, note the presence of the quotes wrapping 'farm-id' which stops PHP from treating "farm" and "id" as separate constants - which is what caused your "Use of undefined constant XYZ" errors.