Solved

stretch the arrows to fit?

Posted on 2010-09-20
11
524 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
 

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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

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

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

758 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now