Solved

resize image in javascript

Posted on 2010-08-19
5
1,615 Views
Last Modified: 2013-11-19
I'm using a program called pikachoose to run a slideshow on my site.  I want to resize the images to 440px wide inside the code. Much like I would do here:

<img src="pikachoose/1.jpg" width="400" />

But because the slideshow is using jquery I can't change the images that easily. Could someone who understands jquery/javascript please take a look at the below code for pikachoose and show me where I can resize the images in the slideshow?

Thanks
/*    06/25/2010
		PikaChoose
	Jquery plugin for photo galleries
    Copyright (C) 2010 Jeremy Fry

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/

(function (jQuery) {
	jQuery.fn.PikaChoose = function (user_options) {
		var defaults = {
			show_captions: true,
			auto_play: false,
			show_prev_next: true,
			slide_speed: 5000,
			thumb_width: 90,
			thumb_height: 60,
			buttons_text: { play: "", stop: "", previous: "", next: "" },
			delay_caption: true,
			user_thumbs: false,
			transition:[-1],
			IESafe: false
		};
				
		return jQuery(this).each(
			function() 
			{
				function CreateThumbnail()
				{
					var image = jQuery(this);
					var aParent = jQuery(this).parent('a');
					if(aParent.length == 0){ aParent = jQuery(this); }
					aParent.hide();
					jQuery(this).attr('pikaLink', aParent.attr('href'));
					//pull it out of the a tag
					image = jQuery(this).clone(true).insertAfter(aParent);
					jQuery(this).removeClass('pika_first');
					//wait for load to remove previous or ie will never see the page loaded
					jQuery(this).bind("load",function(){ aParent.remove(); });
					jQuery('<img />').load(function()
					{
						var w = image.width();
						var h = image.height();
						if(w===0){w = image.attr("width");}
						if(h===0){h = image.attr("height");}
						//grab a ratio for image to user defined settings
						var rw = options.thumb_width/w;
						var rh = options.thumb_height/h;
						
						//determine which has the smallest ratio (thus needing
						//to be the side we use to scale so our whole thumb is filled)
						var ratio;
						if(rw<rh){
							//we'll use ratio later to scale and not distort
							ratio = rh;
							var left = ((w*ratio-options.thumb_width)/2)*-1;
							left = Math.round(left);
							//set images left offset to match
							image.css({left:left});
						}else{
							ratio = rw;
							var top = 0;
							image.css({top:top});
						}
						//use those ratios to calculate scale
						var width = Math.round(w*ratio);
						var height = Math.round(h*ratio);
						image.css("position","relative");
						image.width(width).height(height);
						var imgcss={
							width: width,
							height: height
						};
						image.css(imgcss);					
						image.hover(
							function(){jQuery(this).fadeTo(250,1);},
							function(){if(!jQuery(this).hasClass("pika_selected")){jQuery(this).fadeTo(250,0.4);}}
						);
						if(ulist.children('li').find('img:last').index(image)==0){
							image.fadeTo(250,1);	
						}else{
							image.fadeTo(250,0.4);	
						}
						jQuery(this).show();
					}).attr('src',image.attr('src'));
					//reset images to the clones
					
					images = ulist.children('li').find('img:last');
				}
				//bring in options
				var tranStep = 0;
				var options = jQuery.extend(defaults, user_options);
				var images = jQuery(this).children('li').find('img');
				images.hide();
				//save our list for future ref
				var ulist = jQuery(this);
				ulist.children("li:last").children("img").addClass("pika_last");
				images.each(CreateThumbnail);
				//start building structure
				jQuery(this).before("<div class='pika_main'></div>");
				// houses eveything about the UL
				var main_div = jQuery(this).prev(".pika_main");
				
				//add in slideshow elements when appropriate
				main_div.append("<div class='pika_play'></div>");
				var play_div = jQuery(this).prev(".pika_main").children(".pika_play");
				play_div.html("<a class='pika_play_button'>" + options.buttons_text.play + "</a><a class='pika_stop_button'>" + options.buttons_text.stop + "</a>");
				play_div.fadeOut(1);
				var play_anchor = play_div.children('a:first');
				var stop_anchor = play_div.children('a:last');
				//this div is used to make image and caption fade together
				main_div.append("<div class='pika_subdiv'></div>");
				var sub_div = main_div.children(".pika_subdiv");
				//the main image we'll be using to load
				var firstImage = ulist.find("img:first");
				if(options.user_thumbs)
				{		
					firstImage = firstImage.attr('ref');
				}else
				{
					firstImage = firstImage.attr('src');
				}
				
				
				sub_div.append("<img class='pika_main_img' src='"+firstImage+"' />");
				sub_div.append("<div class='pika_animationDivs'>");
				var ani_divs = sub_div.find(".pika_animationDivs");
				ani_divs.css({'position':'absolute','width':'100%','height':'100%'});

				var y = 0;
				var x = 0;
				for(var t = 0; t<25;t++)
				{
					var a = '<div col="'+y+'" row="'+x+'"></div>';
					ani_divs.append(a);
					y++
					if(y == 5)
					{
						x++;
						y=0;
					}
				}
				ani_divs.children(':last').addClass("pikaLastAni");
				var main_img = sub_div.children("img");
				//build custom overlays. These will use navigation div
				sub_div.append("<div class='pika_prev_hover'></div><div class='pika_next_hover'></div>");
				var prevHover = sub_div.find('.pika_prev_hover');
				var nextHover = sub_div.find('.pika_next_hover');
				prevHover.hide();
				nextHover.hide();
				//create the caption div when appropriate
				if(options.show_captions){
					main_div.append("<div class='pika_caption'></div>");
					var caption_div = main_div.children(".pika_caption");
				}
				
				//navigation div ALWAYS gets created, its refrenced a lot				
				ulist.after("<div class='pika_navigation'></div>");
				var navigation_div = jQuery(this).next(".pika_navigation");
				//fill in sub elements
				navigation_div.append("<a>" + options.buttons_text.previous + "</a> :: <a>" + options.buttons_text.next + "</a>");
				var previous_image_anchor = navigation_div.children('a:first');
				var next_image_anchor = navigation_div.children('a:last');
				
				//hide the navigation if the user doesn't want it
				if(!options.show_prev_next){
					navigation_div.css("display","none");
				}
				
				//playing triggers the loop for the slideshow
				var playing = options.auto_play;
				var animating = false;
				main_img.wrap("<a></a>");
				var main_link = main_img.parent("a");
				
			function activate()
			{
				//sets the intial phase for everything
				
				//image_click is controls the fading
				images.bind("click",image_click);
				//hiding refrence to slide elements if slide is disabled
				
				if(options.auto_play){
					playing = true;
					play_anchor.hide();
					stop_anchor.show();
				}else{
					play_anchor.show();
					stop_anchor.hide();
				}
			
				
				ulist.children("li:last").children("img").addClass("pika_last");
				ulist.children("li:first").children("img").addClass("pika_first");
				ulist.children("li").each(function(){ jQuery(this).children("span").hide(); });
				//css for the list
				var divcss = {
					width: options.thumb_width+"px",
					height: options.thumb_height+"px",
					"list-style": "none",
					overflow: "hidden"
				};
				var licss = {
					"list-style": "none",
					overflow: "hidden"
				};
				images.each(function(){
					jQuery(this).parent('li').css(licss);
					jQuery(this).wrap(document.createElement("div"));
					jQuery(this).parent('div').css(divcss);
				});
				//previous link to go back an image
				previous_image_anchor.bind("click",previous_image);
				prevHover.bind("click",previous_image);
				//ditto for forward, also the item that gets auto clicked for slideshow
				next_image_anchor.bind("click",next_image);
				nextHover.bind("click",next_image);	
				
				//enable mouse tracking for the hover
				sub_div.mousemove(function(e){
					var w = sub_div.width();
					var x = e.pageX - sub_div.offset().left;
      			if(x<w*0.3)
      			{
      				prevHover.fadeIn('fast');
      			}else{
     					prevHover.fadeOut('fast');
     				}
      			if(x>w*0.7)
      			{
      				nextHover.fadeIn('fast');	
      			}else{
      				nextHover.fadeOut('fast');	
      			}
   			});
   			sub_div.mouseleave(function(){ prevHover.fadeOut('fast');nextHover.fadeOut('fast'); });

			}//end activate function
			
			function Gapper(ele, aHeight)
			{
				if(ele.attr('row') == 9 && ele.attr('col') == 0)
				{
					//last row, check the gap and fix it!
					var gap = ani_divs.height()-(aHeight*9);
					return gap;
				}
				return aHeight;
			}
			
			
			function AnimateImage(image_source, image_link,how)
			{
				//main_img.hide();
				jQuery('<img />').load(function()
				{
					ani_divs.height(main_img.height()).show();
					ani_divs.children('div').css({'width':'20%','height':'20%','float':'left'});

					var aWidth = ani_divs.children('div:first').width();
					var aHeight = ani_divs.children('div:first').height();
					if(how!="autoFirst"){
						ani_divs.children().each(function()
						{
							//position myself absolutely
							var div = jQuery(this);
							var xOffset = Math.floor(div.parent().width()/5)*div.attr('col');
							var yOffset = Math.floor(div.parent().height()/5)*div.attr('row');
							div.css({
								'background':'url('+image_source+') -'+xOffset+'px -'+yOffset+'px',
								'width':'0px',
								'height':'0px',
								'position':'absolute',
								'top':yOffset+'px',
								'left':xOffset+'px',
								'float':'none'
							});
						});//end ani_divs.children.each
					}

					//decide our transition
					var n = 0;
					if(options.transition[0] == -1)
					{	//random
						n = Math.floor(Math.random()*6);
					}else{
						n = options.transition[tranStep];
						tranStep++;
						if(tranStep >= options.transition.length){tranStep=0;}
					}
					if(options.IESafe == true)
					{
						if(jQuery.browser.msie)
						{
							n = 0;
						}
					
					}
					switch(n)
					{
						case 0:
							//full frame fade
							ani_divs.height(main_img.height()).hide().css({'background':'url('+image_source+') top left no-repeat'});
							ani_divs.children('div').hide();
							ani_divs.fadeIn('slow',function(){
								FinishedAnimating(image_source,image_link);
								ani_divs.css({'background':'transparent'});
							});

							break;
						case 1:
							ani_divs.children().hide().each(function(index)
							{  
								//animate out as blocks 
								var delay = index*10;
								jQuery(this).delay(delay).animate({"width":aWidth,"height":aHeight},800,'linear',function()
								{
									if(jQuery(this).hasClass('pikaLastAni'))
									{
										FinishedAnimating(image_source,image_link);
									}
								});
							});
							break;
						case 2:
							ani_divs.children().hide().each(function(index)
							{
								var delay = jQuery(this).attr('row')*10;
								jQuery(this).css({"width":aWidth}).delay(delay).animate({"height":aHeight},800,'linear',function()
								{
									if(jQuery(this).hasClass('pikaLastAni'))
									{
										FinishedAnimating(image_source,image_link);
									}
								});
							});
							break;						
						case 3:
							ani_divs.children().hide().each(function(index)
							{
								var delay = jQuery(this).attr('col')*10;
								aHeight = Gapper(jQuery(this), aHeight);
								jQuery(this).css({"height":aHeight}).delay(delay).animate({"width":aWidth},800,'linear',function()
								{
									if(jQuery(this).hasClass('pikaLastAni'))
									{
										FinishedAnimating(image_source,image_link);
									}
								});
							});
							break;
						case 4:
							ani_divs.children().show().each(function(index)
							{
								var delay = index*Math.floor(Math.random()*5)*10;
								aHeight = Gapper(jQuery(this), aHeight);
								
								if(jQuery(this).hasClass('pikaLastAni'))
								{
									delay = 800;
								}
								jQuery(this).css({"height":aHeight,"width":aWidth,"opacity":.01}).delay(delay).animate({"opacity":1},800,function()
								{
									if(jQuery(this).hasClass('pikaLastAni'))
									{
										FinishedAnimating(image_source,image_link);
									}
								});
							});
							break;
						case 5:
							//full frame slide
							ani_divs.height(main_img.height()).hide().css({'background':'url('+image_source+') top left no-repeat'});
							ani_divs.children('div').hide();
							ani_divs.css({width:0}).animate({width:main_img.width()},'slow',function(){
								FinishedAnimating(image_source,image_link);
								ani_divs.css({'background':'transparent'});
							});

							break;
						case 6:
							//fade out then in
							ani_divs.hide();
							main_img.fadeOut('slow',function(){
								main_img.attr('src',image_source).fadeIn('slow',function()
								{
									FinishedAnimating(image_source,image_link);
								});
							});

							break;
					}
				}).attr('src',image_source);//end image preload
			}// end animate images
			
			function FinishedAnimating(image_source,image_link)
			{
				animating = false;
				main_img.attr("src", image_source);
				if(image_link == null){image_link = "#"}
				main_link.attr("href", image_link);
				ani_divs.children().css({"background":"transparent"});
				ani_divs.hide();
				if(playing)
				{
					main_img.animate({opacity:1},options.slide_speed, function()
					{
						//redudency needed here to catch the user clicking on an image during a change.
						if(playing){next_image_anchor.trigger("click",["auto"]);}
					});
				}
			}
			function image_click(event, how){
					//catch when user clicks on an image Then cancel current slideshow
					if(jQuery(this).hasClass('pika_selected') || animating){ return; }
					if(how!="auto" && how!="autoFirst"){
						animating = true;
						stop_anchor.hide();
						play_anchor.show();
						playing=false;
					
						main_img.stop().dequeue();
						if(options.show_captions)
						{
							caption_div.stop().dequeue();
						}
					}
					//all our image variables
					var image_source = "";
					if(options.user_thumbs)
					{		
						image_source = jQuery(this).attr("ref");
					}else
					{
						image_source = this.src;
					}
					//thumbnail animations
					var image_link = jQuery(this).attr("pikalink");
					var image_caption = jQuery(this).parent().next("span").html();
					//fade out the old thumb
					images.filter(".pika_selected").fadeTo(250,0.4); 
					images.filter(".pika_selected").removeClass("pika_selected"); 
					//fade in the new thumb
					jQuery(this).fadeTo(250,1);
					jQuery(this).addClass("pika_selected");
					//fade the caption out
					if(options.show_captions)
					{
						if(options.delay_caption)
						{
							caption_div.fadeTo(800,0);
						}
						caption_div.fadeTo(500,0,function(){
							caption_div.html(image_caption);
							caption_div.fadeTo(800,1);
						});
					}
						AnimateImage(image_source, image_link, how);
			}//end image_click function
			
			function next_image(event, how){
				if(images.filter(".pika_selected").hasClass("pika_last")){
					images.filter(":first").trigger("click",how);
				}else{
					images.filter(".pika_selected").parents('li').next('li').find('div img').trigger("click",how);
				}
			}//end next image function
			
			function previous_image(event, how){
				if(images.filter(".pika_selected").hasClass("pika_first")){
					images.filter(":last").trigger("click",how);
				}else{
					images.filter(".pika_selected").parents('li').prev('li').find('img').trigger("click",how);
				}
			}//end previous image function
			
			function play_button(){
				main_div.hover(
					function(){play_div.fadeIn(400);},
					function(){play_div.fadeOut(400);}
				);
				play_anchor.bind("click", function(){
					main_img.stop();
					main_img.dequeue();
					if(options.show_captions)
					{
						caption_div.stop();
						caption_div.dequeue();
					}
					playing = true;
					next_image_anchor.trigger("click",["auto"]);
					jQuery(this).hide();
					stop_anchor.show();
				});
				stop_anchor.bind("click", function(){
					playing = false;
					jQuery(this).hide();
					play_anchor.show();
				});
			}
			play_button();
			activate();
			ulist.children('li:first').find('img:last').trigger("click",["autoFirst"]);
		});//end return this.each
	}//end build function
	
	//activate applies the appropriate actions to all the different parts of the structure.
	//and loads the sets the first image
})(jQuery);

Open in new window

0
Comment
Question by:elliottbenzle
  • 2
  • 2
5 Comments
 
LVL 14

Expert Comment

by:sam2912
ID: 33481785
What about posting your implementation/use of the code instead?
0
 
LVL 4

Author Comment

by:elliottbenzle
ID: 33484023
Sure,

Implementation is fairly simple. You can see where I tried to aaply a width="400" to the images, but this didn't change anything.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
      <head>
            <link type="text/css" href="pikachoose/compact.css" rel="stylesheet" />
            
            <script type="text/javascript" src="pikachoose/js/jquery.js"></script>
            <script type="text/javascript" src="pikachoose/js/jquery.pikachoose.js"></script>
            <script language="javascript">
                  <!--
                  $(document).ready(
                        function (){
                              $("#pikame_compact").PikaChoose({user_thumbs:true, show_prev_next:false,thumb_width:10,thumb_height:10});
                  });
                  -->
            </script>

            
</head>
<body>
<div class="pikachooseCompact">
      <ul id="pikame_compact">
            <li><img ref="pikachoose/1.jpg"  width="400" src="pikachoose/thumb-circle-active.png"/><span class="photo_text">Now you can have links!</span></li>
            <li><img ref="pikachoose/2.jpg"  width="400" src="pikachoose/thumb-circle-active.png"/><span class="photo_text"> Set custom thumbnails.</span></li>
            <li><img ref="pikachoose/3.jpg"  width="400" src="pikachoose/thumb-circle-active.png"/><span class="photo_text"> Or let PikaChoose make them for you!. </span></li>
            <li><img ref="pikachoose/4.jpg"  width="400" src="pikachoose/thumb-circle-active.png"/><span class="photo_text"> Integer id dolor a erat sagittis volutpat. </span></li>
            <li><img ref="pikachoose/5.jpg"  width="400" src="pikachoose/thumb-circle-active.png"/><span class="photo_text"> Aliquam erat volutpat. </span></li>
</div>
</body>
</html>
0
 
LVL 14

Accepted Solution

by:
sam2912 earned 500 total points
ID: 33486616
Try adding one line to your jQuery code and let me know if it works
$(document).ready(function (){

    $("#pikame_compact").PikaChoose({user_thumbs:true, show_prev_next:false,thumb_width:10,thumb_height:10});

    $("#main_pika img:last").css("width", "400px");

});

Open in new window

0
 
LVL 4

Author Closing Comment

by:elliottbenzle
ID: 33494008
Thanks,
That wasn't it but, it helped me figure it out.
0
 

Expert Comment

by:theideabulb
ID: 38129722
would you care to share your answer. I am running into a situation that is similar.
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Viewers will learn about the different types of variables in Java and how to declare them. Decide the type of variable desired: Put the keyword corresponding to the type of variable in front of the variable name: Use the equal sign to assign a v…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

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

20 Experts available now in Live!

Get 1:1 Help Now