Click Button

Question

User-401818107 posted

I have carousel slider image and when mouse over it, it will show the bigger image. Everything works perfectly. Now I want to add the button and when mouse over the slider, it will display the bigger image and at the same time, when user clicks the button, it will display the same  bigger image too on the next page. The button has been added, but it does not work. 

<script type="text/javascript">
	$(document).ready(function () {
		
		//jCarousel Plugin
	    $('#carousel').jcarousel({
			vertical: true,
			scroll: 2,
			wrap: 'last',
			initCallback: mycarousel_initCallback
	   	});

	//Front page Carousel - Initial Setup
  
   	$('div#slideshow-carousel li a:first').append('<span class="arrow"></span>')

  
  	//Combine jCarousel with Image Display
    $('div#slideshow-carousel li a').hover(
       	function () {
        		
       		if (!$(this).has('span').length) {
        		
   	    		$(this).stop(true, true).children('img').css({'opacity': '1.0'});
       		}		
       	},
       	function () {
        		
       		$('div#slideshow-carousel li a img').stop(true, true).css({'opacity': '1.0'});
       		$('div#slideshow-carousel li a').each(function () {

       			if ($(this).has('span').length) $(this).children('img').css({'opacity': '1.0'});

       		});
        		
       	}
	).hover(function () {

	      	$('span.arrow').remove();        
		$(this).append('<span class="arrow"></span>');
       	$('div#slideshow-main li').removeClass('active');        
       	$('div#slideshow-main li.' + $(this).attr('rel')).addClass('active');	
        	
       	return false;
	});


});


//Carousel Tweaking

function mycarousel_initCallback(carousel) {
	
	// Pause autoscrolling if the user moves with the cursor over the clip.
	carousel.clip.hover(function() {
		carousel.stopAuto();
	}, function() {
		carousel.startAuto();
	});
}
	
	</script>

<div id="slideshow-main">

			<ul>
				<li class="p1 active" >
					<a href="#">
						
<img src="images/1.jpg?url=images/600x600/1.jpg" >

						
					</a>
				</li>
				<li class="p2">
					<a href="#">
						<img  src="images/2.jpg>
						
					</a>
				</li>
				<li class="p3">
					<a href="#">
					<img  src="images/3.jpg>
						
					</a>
				</li>

				<li class="p4">
					<a href="#">
					<img  src="images/4.jpg>
						
					</a>
				</li>
              
				
			</ul>										
		</div>     
				
              </td>
              <td>  
                                
             
     
        
        <div id="slideshow-carousel">				
			  <ul id="carousel" class="jcarousel jcarousel-skin-tango">
				<li><a href="#" rel="p1"><img src="images/small/1.jpg"></a></li>
				<li><a href="#" rel="p1"><img src="images/small/2.jpg"></a></li>></li>
				<li><a href="#" rel="p1"><img src="images/small/3.jpg"></a></li></li>
				<li><a href="#" rel="p1"><img src="images/small/4.jpg"></a></li></li>
	          
				
			  </ul>
		</div></td></tr></table>


<button id="button1">Click</button>
<script>
$("#button1").click(function () {
    $('#div#slideshow-carousel li a').trigger('mouseover');
});
</script>

Please advise! Thank you!

Answer 1

User283571144 posted

Hi Jessy,

According to your description, I couldn't reproduce your issue on my side.

I couldn't only reproduce the jcarousel image  slider on my side, but I couldn't show bigger image when hover the image.

Could you please share the details css and js you have used in your page?

Do you use other jquery library to help you achieve hovering?

If you could post more details information, it will be more easily for us to reproduce the issue and find out a solution.

More details about my test demo codes and result image, you could refer to below codes:

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://cdn.jsdelivr.net/jcarousel/0.2.8/jquery.jcarousel.min.js"></script>
    <link href="http://cdn.jsdelivr.net/jcarousel/0.2.8/skins/tango/skin.css" rel="Stylesheet" />

   
<script type="text/javascript">
        $(document).ready(function () {
            //jCarousel Plugin
            $('#carousel').jcarousel({
                vertical: true,
                scroll: 2,
                wrap: 'last',
                initCallback: mycarousel_initCallback
            });

            //Front page Carousel - Initial Setup
            $('div #slideshow-carousel li a:first').append('<span class="arrow"></span>')


            //Combine jCarousel with Image Display
            $('div #slideshow-carousel li a').hover(
                function () {
                    if (!$(this).has('span').length) {

                        $(this).stop(true, true).children('img').css({ 'opacity': '1.0' });
                    }
                },
                function () {

                    $('div #slideshow-carousel li a img').stop(true, true).css({ 'opacity': '1.0' });
                    $('div #slideshow-carousel li a').each(function () {

                        if ($(this).has('span').length) $(this).children('img').css({ 'opacity': '1.0' });
                    });
                }
            ).hover(function () {

                $('span .arrow').remove();
                $(this).append('<span class="arrow"></span>');
                $('div #slideshow-main li').removeClass('active');
                $('div #slideshow-main li.' + $(this).attr('rel')).addClass('active');
                return false;
            });
        });


        //Carousel Tweaking
        function mycarousel_initCallback(carousel) {
            // Pause autoscrolling if the user moves with the cursor over the clip.
            carousel.clip.hover(function () {
                carousel.stopAuto();
            }, function () {
                carousel.startAuto();
            });
        }
    </script>
</head>

<body>
    <table>
         <tr>
             <td>
                 <div id="slideshow-main">
                     <ul>
                         <li class="p1 active">
                             <a href="#">
                                 <img src="images/shihsi1.jpg" />
                             </a>
                         </li>
                         <li class="p2">
                             <a href="#">
                                 <img src="images/shishi2.jpg" />
                             </a>
                         </li>
                         <li class="p3">
                             <a href="#">
                                 <img src="images/shishi3.jpg" />
                             </a>
                         </li>
                         <li class="p4">
                             <a href="#">
                                 <img src="images/shishi4.jpg" />
                             </a>
                         </li>
                     </ul>
                 </div>
             </td>


             <td>
                 <div id="slideshow-carousel">
                     <ul id="carousel" class="jcarousel jcarousel-skin-tango">
                         <li><a href="#" rel="p1"><img src="images/small/p1.jpg" /></a></li>
                         <li><a href="#" rel="p1"><img src="images/small/p2.jpg" /></a></li>
                         <li><a href="#" rel="p1"><img src="images/small/p3.jpg" /></a></li>
                         <li><a href="#" rel="p1"><img src="images/small/p4.jpg" /></a></li>
                     </ul>
                 </div>
             </td>
         </tr>
    </table>
   
    <button id="button1">click</button>

    <script>
        $("#button1").click(function () {

            $('#div#slideshow-carousel li a').trigger('mouseover');

        });
    </script>

Result:

Best Regards,

Brando

Answer 2

User-401818107 posted

Brando, I have sent you the files requested. Thank you!

Answer 3

User283571144 posted

Hi Jessy,

I have tried your js file, but the page still couldn't work well.

Could you please tell me how you achieve carousel slider image and when mouse over it, it will show the bigger image?

Best Regards,

Brando

Answer 4

User-401818107 posted

An extra button will be added on the page. When users click the button , the image will be displayed on the next page and the image displayed with the scroll should be the same image when the user clicks the button.

Thank you!