Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1658
  • Last Modified:

JQUERY: drag resize with cross slide issue

Hi All,

I'm trying to use drag resize with this cross slider (http://www.gruppo4.com/~tobia/cross-slide.shtml)

Everything loads as expected and drag works, but the resize icon is below the images.

Any ideas how i can get this plugin to work with resize?

here is my code;

Many thanks.
  • 2
1 Solution
Maybe consider using a different slideshow script: http://malsup.com/jquery/cycle/
If you don't like this one, there are many many more out there!

I did try to make it work though... but no dice.  Unfortunately there are many scripts out there that have no regard for other scripts.  Most of the times it's fine, because most of the time you won't need it to be resizable!

That said, when combining scripts, you'll have to shop around until you find the right ones.  Think of it as an organ transplant.
Trust me, you'll spend much more time and effort trying to bend a renegade script to your will.
detox1978Author Commented:
I got it to work by creating an DIV and using alsoresize.  But wasn't keen on it and thought there maybe a way to bring the resize image to the front.

Do you know of another slideshow script that moves/zooms the picture.  I've looked but can't find any.
make sure the path to all js files are correct.

hover over the image you will be able to resize it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<title>CrossSlide - A jQuery plugin to create pan and cross-fade animations</title>
  <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="jquery.cross-slide.js"></script>
  <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.resizable.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.draggable.js"></script>

<style type="text/css">
  #resizable {
    width: 200px;
    height: 200px;
	border: 2px solid #555;

<script type="text/javascript">

	var isResizableLoaded = false;
	$("#resizable").mouseover(function () {

function initResizable(){
function initcrossSlide(){
	$(function() {
		  speed: 45,
		  fade: 1
		}, [
		  { src: 'http://www.gruppo4.com/~tobia/lib/sand-castle.jpeg', dir: 'up'   },
		  { src: 'http://www.gruppo4.com/~tobia/lib/sunflower.jpeg',   dir: 'down' },
		  { src: 'http://www.gruppo4.com/~tobia/lib/flip-flops.jpeg',  dir: 'up'   },
		  { src: 'http://www.gruppo4.com/~tobia/lib/rubber-ring.jpeg', dir: 'down' }
<div id="resizable">Loading&</div>

Open in new window

oops..missed a line "isResizableLoaded = true;"
replace the mouse over function with this

$("#resizable").mouseover(function () {
		isResizableLoaded = true;

Open in new window


Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now