$30

Simple jQuery Fancybox to open different size image

<?php if ( is_single() || is_page() ) { ?>	

	

	<script src="<?php bloginfo('template_url'); ?>/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>

	<script src="<?php bloginfo('template_url'); ?>/fancybox/jquery.fancybox-1.3.4.pack.js"></script>

	<link rel="stylesheet" type="text/css"  media="all" href="<?php bloginfo('template_url'); ?>/fancybox/jquery.fancybox-1.3.4.css" media="screen" />

	<script>

		$(document).ready(function() {



			$(".single-mod-content a").fancybox();



		});

	</script>

		

<?php } ?>

<div class="single-mod-content">

				

	<?php the_content(''); ?>

				

</div>

<div class="single-mod-content">

	

	<p><a href="http://mywebsite.com/wp/wp-content/uploads/2012/01/ABS-new-colour.jpg"><img src="http://mywebsite.com/wp/wp-content/uploads/2012/01/ABS-new-colour-233x350.jpg" alt="" title="ABS new colour" width="233" height="350" class="alignright size-medium wp-image-165"></a>Aliquam tempus, lacus sit amet imperdiet molestie, nibh justo facilisis risus, quis congue justo risus sit amet libero. Nam fermentum orci enim, vel tempor eros.</p>

	

	<p>Vivamus eu est ipsum. Nam dapibus purus nibh, ac blandit erat. Mauris metus orci, lobortis at consequat at, placerat eget nulla. Vivamus sed ligula non lectus vestibulum auctor.</p>

	

	<p><a href="http://mywebsite.com/wp/wp-content/uploads/2012/01/ABSandnewcolour-story.jpg"><img src="http://mywebsite.com/wp/wp-content/uploads/2012/01/ABSandnewcolour-story-350x218.jpg" alt="" title="ABSandnewcolour story" width="350" height="218" class="alignleft size-medium wp-image-163"></a>Mauris augue urna, ultricies sit amet tristique vel, suscipit vitae est.</p>

				

</div>

Josh Cranwell | 01/10/12 at 6:12pm | Edit

Previous versions of this question: 01/10/12 at 6:14pm | 01/10/12 at 6:16pm | 01/10/12 at 6:17pm | 01/10/12 at 6:19pm | 01/10/12 at 6:21pm | 01/10/12 at 7:10pm

(4) Possible Answers Submitted...

• 
  Last edited:
  01/10/12
  6:21pm
  Francisco Javier Carazo Gil says:

  Hi Josh,
  
  Firstly, do not use <script> directly with an echo, please use: wp_enqueue_script
  
  I continue now.

  • 01/10/12 6:25pm
    
    Josh Cranwell says:

    Ok cool

  • 01/10/12 6:30pm
    
    Francisco Javier Carazo Gil says:

    Then, the second one:
    
    Now I can't seem to figure out how to apply the javascript function to all the <a> images which appear inside the div.single-mod-content
    
    

    
    
    $("#single-mod-content > img").find("a");
    
    

  • 01/10/12 6:35pm
    
    Francisco Javier Carazo Gil says:

    And finally, to select img with different dimensions you can use the classes that WP uses to show the size, for example for this image:
    

    
    
    <img src="http://mywebsite.com/wp/wp-content/uploads/2012/01/ABS-new-colour-233x350.jpg" alt="" title="ABS new colour" width="233" height="350" class="alignright size-medium wp-image-165">
    
    

    
    
    To select all them you could use:
    

    
    
    $(".size-medium")
    
    

    
    
    And to delete the big images:
    

    
    
    $(".full-size").remove()
    
    

    
    
    Always, inside the select of div you want.
    
    All this should be enough.

  • 01/10/12 7:03pm
    
    Josh Cranwell says:

    I'm still strugging to get the basic one to work. But there's got to be a simple reason for this so I will figure that out.
    
    I think on your last explanation, you may have mis-understood.
    
    
    When you add a image as a image link from the 'add image' pop-up, within the post editor. The image link is default as the full-size original image. See image.
    
    So the LINK URL is this...
    

    http://mywebsite.com/wp/wp-content/uploads/2012/01/ABS-new-colour.jpg

    
    
    and this means when the medium-size image link is clicked, it will open the full-size image inside the fancybox. See image below, 'Full Size (2912 × 4368)'
    
    I need it to open the 'Large (682 × 1024)' image in the fancybox. But by default, the FILE URL button always uses the Full Size URL.
    
    

    Attached Image

  • 01/10/12 7:12pm
    
    Josh Cranwell says:

    See attachment...
    
    

    Attached Image

  • 01/10/12 7:24pm
    
    Francisco Javier Carazo Gil says:

    Josh,
    
    Thanks for the attachment. Well, if the dimensions are always the same (I don't remember) you could use a selector to select them:
    

    
    
    $('a[href$="name.jpg"]')...
    
    

    
    
    Remember in jQuery:
    = is exactly equal
    != is not equal
    ^= is starts with
    $= is ends with
    *= is contains
    
    And then change:
    

    
    
    $('a[href$="name.jpg"]').attr('href', new_href)
    
    

    
    
    I can continue tomorrow. Now I'm going to sleep. To compose the new href you can find select the extension from the string using the next one:
    

    
    
    var extension = href.substring(href.lastIndexOf(".")));
    
    

  • 01/10/12 7:40pm
    
    Josh Cranwell says:

    See this what I had in mind but the issue is, that the names of the uploads files vary.
    
    For example...
    
    My large image dimension are set too 1024 Height and 1024 Width
    
    ABSandnewcolour-story-1024x639.jpg
    This is a landscape version, but if I added portrait version, then it would look like this...ABSandnewcolour-story-639x1024.jpg
    And if the aspect ratio was also different, then dimensions would change again.
    
    In an idea world, I need a function, to make wordpress rename my upload files for large with...
    
    -large.jpg
    
    instead of
    
    -1024x639.jpg
    
    Then sure we can do a find string that is equal to and replace it with -large.jpg
    

  • 01/11/12 2:48am
    
    Francisco Javier Carazo Gil says:

    Hi Josh,
    
    If you want to change the name of uploaded image you need to set some function in this filter: wp_handle_upload_prefilter.
    
    I'm going to see it, if job is done please tell me.

  • 01/11/12 6:31am
    
    Josh Cranwell says:

    This have not found the right answer yet, but can't continue till later tonight.
    
    wp_handle_upload_prefilter seems promising, can this be done to change all image names?
    
    Thanks

  • 01/11/12 8:13am
    
    Francisco Javier Carazo Gil says:

    Josh,
    
    Here you have an example about you can rename files during upload using variables: http://wordpress.stackexchange.com/questions/5505/rename-files-during-upload-using-variables.
    
    Have you got many images already uploaded? If you have many images we can think in a batch process or maybe a SQL query... but it's hard so manually could be a possibility.

• 
  Last edited:
  01/10/12
  6:21pm
  Romel Apuya says:

  Hi Josh,
  
  Does the fancybox code you have dont work?
  
  you can change you single.php and page.php
  
  from
  

  <div class="single-mod-content">
  
  	<?php the_content(''); ?>
  
  </div>

  
  to
  
  

  <div class="single-mod-content" id="fancyclass">
  
  	<?php the_content(''); ?>		
  
  </div>

  
  
  just add the id
  and ofcourse call the
  
  

  $(document).ready(function() {
  
  			$("#fancyclass a").fancybox();
  
  		});

  
  

  • 01/10/12 6:27pm
    
    Josh Cranwell says:

    Tried this and still not working. So I was nearlly right with my first implementation. But as Francisco says above, do I really need enqueue it to work?

  • 01/10/12 7:10pm
    
    Romel Apuya says:

    is the jQuery library script loaded before loading the fancybox script?
    think its not necessary to load the script using enqueue.
    I'm also using the style you are using and scripts works fine.
    

  • 01/10/12 7:12pm
    
    Josh Cranwell says:

    jQuery library is loaded prior. I'm going to deactivate my other scripts and see if there is a conflict somewhere.

  • 01/10/12 7:21pm
    
    Romel Apuya says:

    can we have the url of the site you are working?
    

  • 01/10/12 7:36pm
    
    Romel Apuya says:

    have you tried using the noConflict for jQuery?

  • 01/10/12 7:44pm
    
    Josh Cranwell says:

    $.noConflict();
    
    jQuery(document).ready(function($) {
    
    	
    
    <?php if ( is_single() || is_page() ) { ?>		
    
    					
    
    	$(".single-mod-content > img").find("a").fancybox();
    
    		
    
    <?php } ?>
    
    				    					
    
    });

    
    
    I did try this, and I deactivated all my scripts so I was just left with this, and still it did not work :-/

  • 01/10/12 7:49pm
    
    Romel Apuya says:

    ok use this one.
    
    
    

    <?php if ( is_single() || is_page() ) { ?>	
    
    	<script src="<?php bloginfo('template_url'); ?>/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
    
    	<script src="<?php bloginfo('template_url'); ?>/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    
    	<link rel="stylesheet" type="text/css"  media="all" href="<?php bloginfo('template_url'); ?>/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
    
    	<script>
    
    	var jxx = jQuery.noConflict();
    
    		jxx(document).ready(function() {
    
    			jxx(".single-mod-content a").fancybox();
    
    		});
    
    	</script>
    
    <?php } ?>

  • 01/10/12 7:58pm
    
    Josh Cranwell says:

    This is getting silly now, sorry to waste all your time. Can't beleive it still not working even with the above. Something is not quite right.
    
    So I'm going to try this instead... http://fancyapps.com/fancybox/
    
    A re-written version, hopefully this will run.

  • 01/10/12 8:03pm
    
    Romel Apuya says:

    try loading the fancybox css before the fancybox jquery
    
    like this..
    
    
    

    <?php if ( is_single() || is_page() ) { ?>	
    
    	<script src="<?php bloginfo('template_url'); ?>/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
    
    	<link rel="stylesheet" type="text/css"  media="all" href="<?php bloginfo('template_url'); ?>/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
    
    	<script src="<?php bloginfo('template_url'); ?>/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    
    	<script>
    
    	var jxx = jQuery.noConflict();
    
    		jxx(document).ready(function() {
    
    			jxx(".single-mod-content a").fancybox();
    
    		});
    
    	</script>
    
    <?php } ?>

  • 01/10/12 8:51pm
    
    Josh Cranwell says:

    I found the bug any way for this, you may understand better why it's conflicting.
    
    I'm using this script to hide my address bar on iOS.
    
    

    
    
    var iWebkit;if(!iWebkit){iWebkit=window.onload=function(){function fullscreen(){var a=document.getElementsByTagName("a");for(var i=0;i<a.length;i++){if(a[i].className.match("noeffect")){}else{a[i].onclick=function(){window.location=this.getAttribute("href");return false}}}}function hideURLbar(){window.scrollTo(0,0.9)}iWebkit.init=function(){fullscreen();hideURLbar()};iWebkit.init()}}

    
    
    Any ideas in how I can stop this conflicting with fancybox?
    
    Thanks Romel

  • 01/10/12 8:59pm
    
    Romel Apuya says:

    add class to the <a> tags inside .single-mod-content

  • 01/10/12 9:08pm
    
    Josh Cranwell says:

    Yeah I am already doing this.
    
    I am running .fancybox on my <a> tags for testing. Its working now.
    
    But it only works if I remove my script that I posted above. I've removed the script above for you to test, check it out. Works fine now.
    
    

    
    
    <script src="http://.......co.uk/wp/wp-content/themes/....../js/script.js"></script>

    
    
    But I idea need that script as it's necessary for my mobile web app. But nevermind if you can't figure it out, I'll vote your for your time.
    
    I just need to figure out the next stage now, getting the image to automatically open the Large image and not the Full Size image.
    

  • 01/10/12 10:10pm
    
    Romel Apuya says:

    try this link.
    
    it wont use javascript.
    
    

    http://shaunmackey.com/articles/mobile/how-to-hide-the-address-bar-in-mobilesafari/

  • 01/10/12 10:13pm
    
    Romel Apuya says:

    or try this
    
    
    
    

    // When ready...
    
    window.addEventListener("load",function() {
    
    	// Set a timeout...
    
    	setTimeout(function(){
    
    		// Hide the address bar!
    
    		window.scrollTo(0, 1);
    
    	}, 0);
    
    });

    
    

  • 01/10/12 10:31pm
    
    Josh Cranwell says:

    Seems to do the trick dude! Thanks for this.

  • 01/10/12 10:38pm
    
    Romel Apuya says:

    no problem on that..

  • 01/10/12 10:39pm
    
    Romel Apuya says:

    I'm so glad to help.

  • 01/10/12 11:59pm
    
    Romel Apuya says:

    so anything not yet done?

  • 01/13/12 4:08am
    
    Romel Apuya says:

    Hi Josh,
    
    How this things going?
    
    
    cheers,
    
    romel

• 
  Last edited:
  01/11/12
  3:14am
  Christianto says:

  Hi Josh,
  
  If I'm not misunderstand what you want, you need to retrieved image url of "large" image only if the site load on mobile device?
  
  So the jquery function is to change all "full-size" image url to "large" image that wordpress created?
  
  If so, you need to get "large" image url through ajax:
  as you can see on the html return the image attachment id is supply by wordpress on class attribute, something like wp-image-xxx where xxx is your attachment id.
  

  <a href="http://mywebsite.com/wp/wp-content/uploads/2012/01/ABS-new-colour.jpg"><img src="http://mywebsite.com/wp/wp-content/uploads/2012/01/ABS-new-colour-233x350.jpg" alt="" title="ABS new colour" width="233" height="350" class="alignright size-medium wp-image-165"></a>

  
  
  we can use this to get your "large" image by wordpress ajax and change the url for mobile browser only something like this:
  
  Ok I tested it on my localhost, it works, if on mobile device it should work by editing the user agent..
  

  <script type="text/javascript">
  
  if( navigator.userAgent.match(/Android/i) ||
  
  	navigator.userAgent.match(/webOS/i) ||
  
  	navigator.userAgent.match(/iPhone/i) ||
  
  	navigator.userAgent.match(/iPod/i) ||
  
  	navigator.userAgent.match(/BlackBerry/)
  
  ){
  
   
  
  	jQuery(document).ready(function($){
  
  		var raw_class, image_id = new Array();
  
  		$('.single-mod-content a img').each(function(i){
  
  			var img_class = $(this).attr('class');
  
  			if(img_class && img_class != undefined){ 
  
  				raw_class = $(this).attr('class').split(" ");
  
  				for(j=0;j<=raw_class.length-1;j++){
  
  					if(raw_class[j].match(/wp-image-/))
  
  						image_id[i]= raw_class[j].slice(9);
  
  				}
  
  			}
  
  		});
  
  		var image_ids = image_id.toString();
  
  		var data = { type: 'get_data', action: 'wp_get_large_image_url', data: image_ids }
  
  		$.post( wp_ajax, data, function(message){
  
  			if(message){
  
  				var raw_data = message.split(',');
  
  				for(i=0;i<=raw_data.length-1;i++){
  
  					var image_data = raw_data[i].split('%-');
  
  					$('.wp-image-'+image_data[1]).parent('a').attr('href', image_data[0]);
  
  				}
  
  			}
  
  		});
  
  	});
  
   
  
  }
  
  </script>

  
  
  and add function to wordpress ajax hook on functions.php:
  

  function wp_large_image_data(){
  
  	
  
  	unset( $_POST['action'] );
  
  	if($_POST['type'] == 'get_data'){
  
  	
  
  		$data = $_POST['data'];
  
  		
  
  		$image_ids = explode( ',',  $data );
  
  		
  
  		$image_large_url = array();
  
  		
  
  		foreach($image_ids as $image_id){
  
  			if($image_id){
  
  				$attachment_data = wp_get_attachment_image_src( $image_id, 'large' );
  
  				$image_large_url[] = $attachment_data[0].'%-'.$image_id;
  
  			}
  
  		}
  
  		
  
  		$image_data = implode( "," , $image_large_url);
  
  		echo $image_data;
  
  		
  
  	}
  
  	die;
  
  }
  
  add_action('wp_ajax_wp_get_large_image_url', 'wp_large_image_data');
  
  add_action('wp_ajax_nopriv_wp_get_large_image_url', 'wp_large_image_data');

  
  
  and define ajax wp url on the header
  

  <script type="text/javascript">
  
     <?php echo "var wp_ajax = '".admin_url('admin-ajax.php')."';" ?>
  
  </script>

  
  

  Previous versions of this answer: 01/11/12 at 3:10am | 01/11/12 at 3:14am

  • 01/11/12 3:15am
    
    Christianto says:

    You should define wordpress ajax admin url on the header
    I updated my answer..

  • 01/11/12 6:26am
    
    Josh Cranwell says:

    I will continue to look at answer later as I'm on another job at the mo. Thanks

• 
  Last edited:
  01/13/12
  4:45am
  Albert Shala says:

  It looks like the question is answered, I thought I'd add in that fancy box was available as an plugin http://wordpress.org/extend/plugins/fancybox-for-wordpress/

This question has expired.

Current status of this question: Community pot

Top Experts (+)

• 
  Denzel Chia$1863 earned (plus $174)
• 
  Utkarsh Kukreti$1758 earned (plus $127)
• 
  John Cotton$1487 earned (plus $167)
• 
  Rashad Aliyev$1443 earned (plus $37)
• 
  Christianto $1401 earned (plus $278)

Top Donors (+)

• 
  Sinoun Chea$29 given (pure donation)
• 
  Dan | gteh $12 given (pure donation)
• 
  Lawrence Krubner$36 given (pure donation)

Top Supporters (+)