JQUERY: drag resize with cross slide issue

Posted on 2010-01-02
Last Modified: 2013-11-19
Hi All,

I'm trying to use drag resize with this cross slider (

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.
Question by:detox1978
    LVL 11

    Expert Comment

    Maybe consider using a different slideshow script:
    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.
    LVL 2

    Author Comment

    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.
    LVL 22

    Accepted Solution

    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" "">
    <html xmlns="" xml:lang="en">
    	<title>CrossSlide - A jQuery plugin to create pan and cross-fade animations</title>
      <script type="text/javascript" src=""></script>
      <script type="text/javascript" src="jquery.cross-slide.js"></script>
      <link type="text/css" href="" rel="stylesheet" />
      <script type="text/javascript" src=""></script>
      <script type="text/javascript" src=""></script>
      <script type="text/javascript" src=""></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: '', dir: 'up'   },
    		  { src: '',   dir: 'down' },
    		  { src: '',  dir: 'up'   },
    		  { src: '', dir: 'down' }
    <div id="resizable">Loading&</div>

    Open in new window

    LVL 22

    Expert Comment

    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 Should I Do With This Threat Intelligence?

    Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

    Join & Write a Comment

    In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
    Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
    The viewer will learn how to count occurrences of each item in an array.
    The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

    733 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

    21 Experts available now in Live!

    Get 1:1 Help Now