Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

stretch the arrows to fit?

Posted on 2010-09-20
11
Medium Priority
?
560 Views
Last Modified: 2012-05-10
The arrows look great but I can't figure out how to get the div to stretch when there are only a few images.  here's an example: http://www.creativemusicphotography.com/?p=96

and the code:

      /**
      * start output
      */
      $output = "<!-- begin simple scrollbar gallery -->\n      <div class='gallery' align='center' style='position:relative; z-index:1;'>\n";

      /**
      * first big image
      */
      $output .= "      ".wp_get_attachment_image(key($attachments),"large")."\n";

      /**
      * thumbnails
      */
      $output .= "      <div class='gallery-list'><div style='position:absolute;z-index:100;left:0px;margin-left:-10%;top:340px;width:116%;height:100px;background-color:transparent;'><img src='http://www.creativemusicphotography.com/wp-content/themes/f8-lite/images/left_purple_arrow.jpg' align='left'><img src='http://www.creativemusicphotography.com/wp-content/themes/f8-lite/images/right_purple_arrow.jpg' align='right'></div><br>\n";
      foreach ( $attachments as $id => $attachment ) {
            $big_image = wp_get_attachment_image_src($id, 'large'); // url of big image
//            $thumbnail_image = wp_get_attachment_image_src($id,"thumbnail"); // url of thumbnail
            $output .= "            <a href=\"".$big_image[0]."\">\n";
            $output .= "                        ".wp_get_attachment_image($id,"thumbnail")."\n";
            $output .= "            </a>\n";
      }
      $output .= "      </div></div>\n";

      /**
      * end output
      */
      $output .= "<!-- end simple scrollbar gallery -->\n";
0
Comment
Question by:xanabobana
  • 6
  • 5
11 Comments
 
LVL 7

Expert Comment

by:Swafnil
ID: 33722929
Sorry to ask but what exactly do you want to accomplish? Do you want the previous/next arrows to expand to fill the entire view port when the photo is smaller (which I would not recommend because this would look awful) or do you want the middle image (the one of the musician) to expand if it's smaller?

OT: is creativemusicphotography.com your website? If yes, I would recommend to make the header image (and navigation) a lot smaller, otherwise your visitors always have to scroll before seeing the actual content.
0
 

Author Comment

by:xanabobana
ID: 33730600
it's not my website, a client with very specific ideas.  she made the header image a while back and will not budge about it.  She wants the purple arrows on either side of the thumbnails, so people know to scroll, but I can't get the div containing the arrows to expand/contract depending on how many thumbnails there are.  
0
 
LVL 7

Expert Comment

by:Swafnil
ID: 33732258
The problem is caused through the oversized div holding the arrows, it's created and positioned before the thumbnail gallery is created. The best way to have the arrows right next to the thumbnails would be to first add the left arrow to a div, then adding all thumbnails followed by the right arrow and then closing the div:

Sorry, I couldn't check the code because I don't have a running WP installation, but I hope you'll get the idea.
$output .= "      <div class='gallery-list' style=\"width:100%;\" align=\"center\">\n".
	"<img src='http://www.creativemusicphotography.com/wp-content/themes/f8-lite/images/left_purple_arrow.jpg' align='left'>\n";
  foreach ( $attachments as $id => $attachment ) {
		$big_image = wp_get_attachment_image_src($id, 'large'); // url of big image
//            $thumbnail_image = wp_get_attachment_image_src($id,"thumbnail"); // url of thumbnail
		$output .= "            <a href=\"".$big_image[0]."\">\n";
		$output .= "                        ".wp_get_attachment_image($id,"thumbnail")."\n";
		$output .= "            </a>\n";
  }
  $output .= "<img src='http://www.creativemusicphotography.com/wp-content/themes/f8-lite/images/right_purple_arrow.jpg' align='right'>\n".
  	"      </div>\n";

Open in new window

0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

Author Comment

by:xanabobana
ID: 33738791
that puts the arrows at the very end of the div, and the overflow is hidden.  so if you have a bunch of photos & need to scroll you don't see the arrow until you're done scrolling.  how do I keep the arrows at a fixed point (either end of the stretchable div) & only scroll the thumbs?

i just tried making the arrows into a background image that would stretch with the width of the div (I don't mind if the arrows get a bit distorted)...but never got it to show over the thumbs.  I've attached the entire page of code w/ the css.
simple-scrollbar-gallery.php
0
 

Author Comment

by:xanabobana
ID: 33772179
0
 

Author Comment

by:xanabobana
ID: 33845672
I ended up taking count($attachments) and multiplying that by 18 to get the width percentage of the div:

$divwidth=100;
      $numthumbs =count($attachments);
      if ($numthumbs<6) $divwidth=18*$numthumbs;

more than 6 pics, the width could be 100%
0
 
LVL 7

Expert Comment

by:Swafnil
ID: 33848265
There is still a problem if there are more than 6 images displayed, the 7th picture of the series will overlap the right scroll arrow and the arrows will scroll along with the images. How about removing the arrows and adding a note below the gallery like "Move mouse left/right to scroll"? The scrolling gallery itself looks quite nice.
0
 
LVL 7

Accepted Solution

by:
Swafnil earned 2000 total points
ID: 33848693
Got it I think. Give it a try and let me know if it worked for you.
<?php
/*
Plugin Name: simple scrollbar gallery
Version: 1.7
Description: Replaces the builtin [gallery] with a simple jQuery script. Still integrated in the page without any popups.
Author: Thomas Schmidt
Author URI:http://www.netaction.de/
Plugin URI: http://wordpress.org/extend/plugins/simple-scrollbar-gallery/
*/

if (!is_admin()) {
	load_plugin_textdomain('simple_scrollbar_gallery', NULL, dirname(plugin_basename(__FILE__)));
	add_shortcode('gallery', 'simple_scrollbar_gallery');
	add_action('wp_head', 'simple_scrollbar_gallery_header');
	add_action('init', 'simple_scrollbar_gallery_enqueue_scripts');
}


/*****************************
* Enqueue jQuery & Scripts
*/
function simple_scrollbar_gallery_enqueue_scripts() {
	if ( function_exists('plugin_url') )
		$plugin_url = plugin_url();
	else
		$plugin_url = get_option('siteurl') . '/wp-content/plugins/' . plugin_basename(dirname(__FILE__));

	// jquery
	wp_deregister_script('jquery');
	wp_register_script('jquery', ($plugin_url  . '/jquery-1.4.2.min.js'), false, '1.4.2');
	wp_enqueue_script('jquery');
}


function simple_scrollbar_gallery_header() {
	if ( function_exists('plugin_url') )
		$plugin_url = plugin_url();
	else
		$plugin_url = get_option('siteurl') . '/wp-content/plugins/' . plugin_basename(dirname(__FILE__));

	/**
	* Initialize
	*/
	echo "<script type='text/javascript'>
	var active,element,mouseX;
	function scroller() {
		var x = (mouseX - element.offset().left) / element.width() - 0.5;

		x=Math.round(x*x*x*60);

		element.scrollLeft(element.scrollLeft()+x);
	}
	$(function() {

		$('.gallery .gallery-list').mousemove( function(e) { mouseX = e.pageX; });
		$('.gallery .gallery-list').css('white-space','nowrap').css('overflow','hidden').css('background-image','http://www.creativemusicphotography.com/wp-content/themes/f8-lite/images/purple_arrows_both.jpg').css('background-size', '100%');
		$('.gallery .gallery-list a').mouseover(function() {  // load big image
			// Sascha Meyer, 2010-10-07: added one more '.parent()' because an additional wrapper div had to be added
			$(this).parent().parent().parent().children(':first').attr('src',$(this).attr('href'));
		});
		$('.gallery .gallery-list a').click(function() {  // disable mouseclick
			return false;
		});
		$('.gallery .gallery-list').mouseenter(function() {  // start scrolling
			element=$(this);
			active=setInterval('scroller()', 20);
		});
		$('.gallery .gallery-list').mouseleave(function() {  // stop scrolling
			clearInterval(active);
		});
	});
</script>
";
}




function simple_scrollbar_gallery($output, $attr) {

	/**
	* Grab attachments
	*/
	global $post;
	
	if ( isset( $attr['orderby'] ) ) {
		$attr['orderby'] = sanitize_sql_orderby( $attr['orderby'] );
		if ( !$attr['orderby'] )
			unset( $attr['orderby'] );
	}
	
	extract(shortcode_atts(array(
		'order'      => 'ASC',
		'orderby'    => 'menu_order ID',
		'id'         => $post->ID,
	), $attr));

	$id = intval($id);
	$attachments = get_children( array('post_parent' => $id, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
	
	if ( empty($attachments) )
		return '';
		
	if ( is_feed() ) { // link to medium image in feeds
		$output = "\n";
		foreach ( $attachments as $id => $attachment )
			$output .= wp_get_attachment_link($id, 'medium', true) . "\n";
		return $output;
	}
	

	/**
	* start output
	*/
	$output = "<!-- begin simple scrollbar gallery -->\n	<div class='gallery' align='center' style='position:relative; z-index:1;'>\n";

	/**
	* first big image
	*/
	$output .= "	".wp_get_attachment_image(key($attachments),"large")."\n";

	/**
	* thumbnails
	*/
	$divwidth=100;
    $numthumbs =count($attachments);
    if ($numthumbs<6) $divwidth=18*$numthumbs;
	/**
	Sascha Meyer, 2010-10-07:
	some explanations: in case less than 6 images are displayed, shrink the gallery container otherwise the arrows will not be aligned to 
	the sliding gallery images.
	Some tricks had to be used to align the right arrow, this is due to the hidden overflow from the scroller which prohibits using float:right
	on the right arrow, the arrow will then be placed in the line below instead of being floated on the right side of the pics. 
	The trick used is to add the arrow and position it relatively with a negative top position so it appears in the right spot; after this, the
	scroller needs a right margin, otherwise the last image in the series will be overlapped by the arrow; third an "overflow-y:hidden" is
	added to the newly added container, otherwise a big gap will be added below the scroller (due to the right arrow initially positioned below
	the scroller).
	*/
	  
	//$output .= "      <div class='gallery-list' align=\"center\"><div style='width:70%;background-color:transparent;' align='center'>\n";
	$output .= 	"<div style=\"clear:left;width:{$divwidth};margin-left:-85px;height:150px;overflow-y:hidden;\">
		<img src=\"http://www.creativemusicphotography.com/wp-content/themes/f8-lite/images/left_purple_arrow.jpg\" style=\"float:left\">
		<div class='gallery-list' align=\"center\" style=\"margin-right:85px;\">\n";
	foreach ( $attachments as $id => $attachment ) {
			$big_image = wp_get_attachment_image_src($id, 'large'); // url of big image
	//            $thumbnail_image = wp_get_attachment_image_src($id,"thumbnail"); // url of thumbnail
			$output .= "            <a href=\"".$big_image[0]."\">\n";
			$output .= "                        ".wp_get_attachment_image($id,"thumbnail")."\n";
			$output .= "            </a>\n";
	  }
	  $output .= "</div>\n".
	"<img src=\"http://www.creativemusicphotography.com/wp-content/themes/f8-lite/images/right_purple_arrow.jpg\" style=\"float:right;position:relative;top:-150px;\">\n".
	"</div>\n";

	/**
	* end output
	*/
	$output .= "<!-- end simple scrollbar gallery -->\n";


	return $output;

}

?>

Open in new window

0
 

Author Comment

by:xanabobana
ID: 33863478
yes, looks great- thanks!
0
 

Author Closing Comment

by:xanabobana
ID: 33863484
great, so helpful!
0
 
LVL 7

Expert Comment

by:Swafnil
ID: 33866263
Good morning,

great you like it! I just saw a minor issue with the code, I forgot to add a "%" after the:

width:{$divwidth}

so it should read

width:{divwidth}%

Adding the percentage sign should put the arrows right next to the images instead of having them at the left- and rightmost positions.
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

3 proven steps to speed up Magento powered sites. The article focus is on optimizing time to first byte (TTFB), full page caching and configuring server for optimal performance.
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

783 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question