Fixed static image path in Javascript using CakePHP

Nov 10, 2010 in CAKEPHP
cakephp javascript router
6 min read

Today I was encountered a problem within the static path for images in my Javascript file. So this was a design that given by my friend Budi, and he using a Jquery slider plugin in his design. Here are the original Javascript file that he gave me :

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143


// set up horizontal scroll
var setupFeaturedBoxes = function () {
  var buttons = {
    previous: {
      enabled: '/img/arrow1-left.gif',
      hover: '/img/arrow1-left.gif'
    },
    next: {
      enabled: '/img/arrow1-right.gif',
      hover: '/img/arrow1-right.gif'
    }
  };

  var featuredContentWidth = 121;
  var featuredContentScrollPrefs = {
    speed: 800,
    axis: 'x'
  };

jQuery('.featuredBox').each( function (i) {
  var featuredBox = jQuery(this);
  featuredBox
  .find('.scrollArrow')
  .filter('.next')
  .hover(
  function () {
  jQuery(this)
    .attr( 'src', buttons.next.hover )
    .css( 'cursor', 'pointer' );
  },
  function () {
    jQuery(this)
      .attr( 'src', buttons.next.enabled )
      .css( 'cursor', 'default' );
    }
  )
.click( function() {
  featuredBox.find('.featuredContent').scrollTo(
  '+=' + featuredContentWidth + 'px',
  featuredContentScrollPrefs
);
  return false;
})
.end()
.filter('.prev')
.hover(
function () {
  jQuery(this)
    .attr( 'src', buttons.previous.hover )
    .css( 'cursor', 'pointer' );
  },
function () {
jQuery(this)
  .attr( 'src', buttons.previous.enabled )
  .css( 'cursor', 'default' );
}
)
.click( function() {
featuredBox.find('.featuredContent').scrollTo(
  '-=' + featuredContentWidth + 'px',
  featuredContentScrollPrefs
);
  return false;
});
});
  jQuery('.featuredBox .featuredContent .featuredDisplayDiv').each( function (i) {
  jQuery(this).css( 'width', ( featuredContentWidth * jQuery(this).find('ul li').size() ) + 'px' );
});
};

var setupFeaturedBoxes2 = function () {
var buttons = {
previous: {
  enabled: '/img/arrow2-left.gif',
  hover: '/img/arrow2-left.gif'
},
next: {
  enabled: '/img/arrow2-right.gif',
  hover: '/img/arrow2-right.gif'
}
};
  var featuredContentWidth2 = 172;
  var featuredContentScrollPrefs = {
    speed: 800,
    axis: 'x'
  };
  jQuery('.featuredBox2').each( function (i) {
  var featuredBox = jQuery(this);
  featuredBox
  .find('.scrollArrow')
  .filter('.next')
  .hover(
  function () {
    jQuery(this)
      .attr( 'src', buttons.next.hover )
      .css( 'cursor', 'pointer' );
    },
  function () {
    jQuery(this)
      .attr( 'src', buttons.next.enabled )
      .css( 'cursor', 'default' );
    }
  )
  .click( function() {
  featuredBox.find('.featuredContent2').scrollTo(
    '+=' + featuredContentWidth2 + 'px',
    featuredContentScrollPrefs
  );
    return false;
  })
  .end()
  .filter('.prev')
  .hover(
  function () {
    jQuery(this)
    .attr( 'src', buttons.previous.hover )
    .css( 'cursor', 'pointer' );
  },
  function () {
    jQuery(this)
      .attr( 'src', buttons.previous.enabled )
      .css( 'cursor', 'default' );
    }
  )
  .click( function() {
    featuredBox.find('.featuredContent2').scrollTo(
      '-=' + featuredContentWidth2 + 'px',
      featuredContentScrollPrefs
    );
      return false;
    });
  });
  jQuery('.featuredBox2 .featuredContent2 .featuredDisplayDiv2').each( function (i) {
    jQuery(this).css( 'width', ( featuredContentWidth2 * jQuery(this).find('ul li').size() ) + 'px' );
  });
};


jQuery(document).ready(function(){
  // set up horizontal scroll
  setupFeaturedBoxes();
  setupFeaturedBoxes2();
});

As you can see at the line 5 there is an image path in which needed by the slider to load the image. Actually I can easily using the absolute path but if change the environment or the path then the image will be broken. So here come the Router class of CakePHP to the rescue.

The idea is to change the Javascript file to PHP file and change the path to use the Router class. Here is the sample of my PHP file :

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155


    <script type="text/javascript" language="JavaScript">
    var setupFeaturedBoxes = function () {
    	var buttons = {
    		previous: {
    			enabled: <?php Router::url('/img/arrow1-left.gif')?>,
    			hover: <?php Router::url('/img/arrow1-left.gif')?>
    		},
    		next: {
    			enabled: <?php Router::url('/img/arrow1-right.gif')?>,
    			hover: <?php Router::url('/img/arrow1-right.gif')?>
    		}
    	};
    	var featuredContentWidth = 121;
    	var featuredContentScrollPrefs = {
    		speed: 800,
    		axis: 'x'
    	};
    	jQuery('.featuredBox').each( function (i) {
    		var featuredBox = jQuery(this);
    		featuredBox
    			.find('.scrollArrow')
    				.filter('.next')
    					.hover(
    						function () {
    							jQuery(this)
    								.attr( 'src', buttons.next.hover )
    								.css( 'cursor', 'pointer' )
    							;
    						},
    						function () {
    							jQuery(this)
    								.attr( 'src', buttons.next.enabled )
    								.css( 'cursor', 'default' )
    							;
    						}
    					)
    					.click( function() {
    						featuredBox.find('.featuredContent').scrollTo(
    							'+=' + featuredContentWidth + 'px',
    							featuredContentScrollPrefs
    						);
    						return false;
    					})
    				.end()
    				.filter('.prev')
    					.hover(
    						function () {
    							jQuery(this)
    								.attr( 'src', buttons.previous.hover )
    								.css( 'cursor', 'pointer' )
    							;
    						},
    						function () {
    							jQuery(this)
    								.attr( 'src', buttons.previous.enabled )
    								.css( 'cursor', 'default' )
    							;
    						}
    					)
    					.click( function() {
    						featuredBox.find('.featuredContent').scrollTo(
    							'-=' + featuredContentWidth + 'px',
    							featuredContentScrollPrefs
    						);
    						return false;
    					})
    		;
    	});
    	jQuery('.featuredBox .featuredContent .featuredDisplayDiv').each( function (i) {
    		jQuery(this).css( 'width', ( featuredContentWidth * jQuery(this).find('ul li').size() ) + 'px' );
    	});
    };
    
    var setupFeaturedBoxes2 = function () {
    	var buttons = {
    		previous: {
    			enabled: <?php Router::url('/img/arrow2-left.gif')?>,
    			hover: <?php Router::url('/img/arrow2-left.gif')?>
    		},
    		next: {
    			enabled: <?php Router::url('/img/arrow2-right.gif')?>,
    			hover: <?php Router::url('/img/arrow2-right.gif')?>
    		}
    	};
    	var featuredContentWidth2 = 172;
    	var featuredContentScrollPrefs = {
    		speed: 800,
    		axis: 'x'
    	};
    	jQuery('.featuredBox2').each( function (i) {
    		var featuredBox = jQuery(this);
    		featuredBox
    			.find('.scrollArrow')
    				.filter('.next')
    					.hover(
    						function () {
    							jQuery(this)
    								.attr( 'src', buttons.next.hover )
    								.css( 'cursor', 'pointer' )
    							;
    						},
    						function () {
    							jQuery(this)
    								.attr( 'src', buttons.next.enabled )
    								.css( 'cursor', 'default' )
    							;
    						}
    					)
    					.click( function() {
    						featuredBox.find('.featuredContent2').scrollTo(
    							'+=' + featuredContentWidth2 + 'px',
    							featuredContentScrollPrefs
    						);
    						return false;
    					})
    				.end()
    				.filter('.prev')
    					.hover(
    						function () {
    							jQuery(this)
    								.attr( 'src', buttons.previous.hover )
    								.css( 'cursor', 'pointer' )
    							;
    						},
    						function () {
    							jQuery(this)
    								.attr( 'src', buttons.previous.enabled )
    								.css( 'cursor', 'default' )
    							;
    						}
    					)
    					.click( function() {
    						featuredBox.find('.featuredContent2').scrollTo(
    							'-=' + featuredContentWidth2 + 'px',
    							featuredContentScrollPrefs
    						);
    						return false;
    					})
    		;
    	});
    	jQuery('.featuredBox2 .featuredContent2 .featuredDisplayDiv2').each( function (i) {
    		jQuery(this).css( 'width', ( featuredContentWidth2 * jQuery(this).find('ul li').size() ) + 'px' );
    	});
    };
    
    
    jQuery(document).ready(function(){
    
    
    // set up horizontal scroll
    	setupFeaturedBoxes();
    	setupFeaturedBoxes2();
    
    });
</script>

As you can see I just change the image path to . I don’t know if this is the best solution or not, but for now it’s the simplest :D