Develop Reference

onclick zoom image in full screen

I have slider wth product image, there is a button view more. I want that when someone clicks on that button then image of that product should be visible/zoomed to full screen with animation. Just like this:
https://dribbble.com/shots/6347184-Better-Hero -- Example link
My header screenshot:
My code:
<div class="projectSlider"> // slider
<div class="projectSlider--item"> // slider item 1
<div class="row">
<div class="col-md-6 col-sm-12 col-xs-12">
<div class="projectSlider--text">
<div class="projectSlider--subTitle">An Inspirational Collection Of</div>
<div class="projectSlider--title"><span>Creative Designs</span></div>
<p class="projectSlider--description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
</p>
<a href="#" class="btn secondary projectSlider--view" data-quickview="quickView">View
More</a>
</div>
</div>
<div class="col-md-6 col-sm-12 col-xs-12">
<div class="projectSlider--img">
<img src="img/template.jpg" alt="template"> // slider image
</div>
</div>
</div>
</div>
// slider items, so on....
</div>
I don't know how to do that kind of image zoom effect. Can you please help me with this? I m stuck

You can do this by creating a simple animation which increases the image size, and after, creating a click listener on that image.
Take a look at the following example, which increases the image size by clicking on it.
const image = document.querySelector(".clickable-image");
image.addEventListener("click", () =>{
image.classList.add("image-open");
})
.clickable-image{
width:50vw;
}
.image-open{
animation: scaleUp 2s forwards linear;
}
.clickable-image:hover{
cursor: pointer;
}
#keyframes scaleUp{
from{
width:50vw;
}to{
width:100vw;
}
}
<img class="clickable-image" src="https://i.pinimg.com/originals/ea/e4/a5/eae4a5191fafae3979ea975d206fcd0b.jpg" alt="image">

Error in pagination with ajax

I am using pagination with ajax to display my records but at the end I got these error in my console whenever I click on the button for next page.
This is the error which I get
jquery-2.2.3.min.js:4 GET http://localhost:8000/ajax/products?page=2 500 (Internal Server Error)
My controller is:
public function index()
{
$hospitals = Hospital::paginate(3);
return View::make('patientPanel/patientHospital')->with('hospitals',$hospitals);
}
}
My routes are
Route::get('/patientPanel/patientHospital',
'patientHospitalController#index');
Route::get('ajax/patienthospital',function(){
$hospitals = Hospital::paginate(3);
return
View::make('/patientPanel/patientHospital')>with('hospitals',$hospitals)->render();
});
And my view
<section id="team">
<div class="container">
<div class="row">
#foreach($hospitals as $hospital)
<div class="col-md-3 col-sm-6 col-xs-12 wow fadeIn content" data-
wow-offset="50" data-wow-delay="1.3s">
<div class="team-wrapper">
<img src="/uploads/{{$hospital->picture }}" class="img-responsive" alt="team img 1" style="height: 270px; width: 500px">
<div class="team-des">
<h4>{{$hospital->name}}</h4>
<span>Designer</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elitquisque tempus ac eget diam et laoreet phasellus ut nisi id leo molest.</p>
</div>
</div>
</div>
#endforeach
</div>
{{$hospitals->links()}}
</div>
</section>
<script type="text/javascript">
$(document).on('click','.pagination a',function(e){
e.preventDefault();
var page = ($(this).attr('href').split('page='))[1];
getProducts(page);
});
function getProducts(page)
{
$.ajax({
url:'ajax/patientHospital?page?page='+page
}).done(function(data){
$('.content').html(data);
location.hash = page;
});
}
</script>
This is my code please tell me what I have done wrong because of which I am getting this error.

in this a syntax error in my route resturn statement
return
View::make('/patientPanel/patientHospital')>with('hospitals',$hospitals)->render();
write as
return
View::make('/patientPanel/patientHospital')->with('hospitals',$hospitals)->render();

Slide Toggle Won't Activate On Class

I looked up many questions on this topic and there are similar answers that should work, but it's not working for me. I admit DOM traversal is not my strong point, so if you have a solution and can give some context it would really help me understand why the other solutions weren't working.
I have a div with a button and on a button click (this button only appears on mobile) it should slide down only the current div content. I can get this to work, but the issue is it opens up ALL the divs content. I cannot however get it to only open the specific card even using solutions such as $(this), $(next), $(prev) or $(find).
The code I am posting below does not open it at all, and I am using this version of the code because it is most similar to answers on Stack Overflow.
$(document).ready(function(){
$('.mobile-icon').on('click', function(){
event.preventDefault();
$(this).next().find('.card-bottom').slideToggle();
console.log('hi there'); //this does print
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- FIRST CARD -->
<div class="card">
<div class="card-top">
<h1 class="card-title">Headline</h1>
<span class="glyphicon glyphicon-plus"></span>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
<!-- END CARD-TOP -->
<div class="card-bottom">
<p>Content to be toggled</p>
</div>
<!-- END CARD BOTTOM -->
</div>
<!-- END CARD -->
<!-- SECOND CARD -->
<div class="card">
<div class="card-top">
<h1 class="card-title">Headline</h1>
<span class="glyphicon glyphicon-plus"></span>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
<!-- END CARD-TOP -->
<div class="card-bottom">
<p>Content to be toggled</p>
</div>
<!-- END CARD BOTTOM -->
</div>
<!-- END CARD -->

The main issue is how you're using jQuery's .next() and .find(). Since $(this) is the <a> tag, .next(), which selects the next sibling, is the <p> tag. Then calling .find() on the <p> tag would check through all its descendants, for which there are none.
Therefore you need to select the parent of both the 'card-top' and 'card-bottom' divs before you traverse down with .find().
For example:
$(document).ready(function(){
$('.mobile-icon').on('click', function(event){
event.preventDefault();
$(this).parent().parent().find('.card-bottom').slideToggle();
});
});
The first call to .parent() will be the parent of the <a> tag, which is the 'card-top' div, and the .parent() of that will be the 'card' div. Then calling .find() will work.
http://www.bootply.com/UMwXaOILHv

Missing the closing " on class="card>
Add event to function() so it's function(event)
If you don't need to link anywhere use a div instead of an a tag and you won't need preventDefault.
$('.mobile-icon').on('click', function(event) {
event.preventDefault();
$(this).closest('.card').find('.card-bottom').slideToggle();
// .closest finds the nearest .card ancestor (it goes up)
// .find then finds .card-bottom within the closest .card
});
.mobile-icon {
background-color: black;
width: 100px; height: 40px;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- FIRST CARD -->
<div class="card">
<div class="card-top">
<h1 class="card-title">Headline</h1>
<div class="mobile-icon">click me</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
<!-- END CARD-TOP -->
<div class="card-bottom">
<p>Content to be toggled</p>
</div>
<!-- END CARD BOTTOM -->
</div>
<!-- END CARD -->
<!-- SECOND CARD -->
<div class="card">
<div class="card-top">
<h1 class="card-title">Headline</h1>
click me
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
<!-- END CARD-TOP -->
<div class="card-bottom">
<p>Content to be toggled</p>
</div>
<!-- END CARD BOTTOM -->
</div>
<!-- END CARD -->
fiddle
https://jsfiddle.net/Hastig/m2zaLfnz/

jQuery plugin cycle2 caption is not animating up and down during slideshow

I cant get the animation of the caption / overlay to work. I want the caption to slide up and down from the bottom as the slides go in and out. I tried a bunch of things and I couldn't get it to work. My slides are made up of divs not images. Not sure if I put the HTML for the captions in the right place. I included the caption2 plugin.
Jsfiddle
<div class="cycle-slideshow slider"
data-cycle-slides = "> div"
data-cycle-fx="scrollHorz"
data-cycle-timeout="3000"
data-cycle-caption-plugin="caption2"
data-cycle-caption-fx-out="slideUp"
data-cycle-caption-fx-in="slideDown"
>
<div class="slide1 slide">
<div class= "innerWrapper" data-cycle-title="Spring">
<p class ="slide1text">This is a great div Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, unde, vel ratione nulla illum libero fuga placeat corporis molestias quisquam.</p> <img class ="slide1img" src="http://dummyimage.com/300x150/000/fff&text=slide1" alt=""/>
<br>
Click More
</div>
<div class="cycle-overlay">The Redwoods 1</div>
</div>
<div class="slide2 slide">
<div class = "innerWrapper" data-cycle-title="Spring" data-cycle-desc="Sonnenberg Gardens">
<img class ="slide2img" src="http://dummyimage.com/250x150/000/fff&text=slide2" alt=""/>
<p class ="slide2text">Text for slide 2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, molestias incidunt ab voluptatibus id nemo error delectus sunt impedit illum.</p>
</div>
<div class="cycle-caption">Test</div>
<div class="cycle-overlay"></div>
</div>
</div>
Jsfiddle
Thank you for your help in advance.

Remove the "test" text from cycle-caption and put it into cycle-overlay so it is consistant with the other slides. then this javascript should get you started:
$( '.cycle-slideshow' ).on( 'cycle-after', function(event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
$(incomingSlideEl).find('.cycle-overlay').slideDown();
$(outgoingSlideEl).find('.cycle-overlay').slideUp();
});
you may have to play around with it a bit.
http://jsfiddle.net/w95ya/1/
Check this link to see what events you can listen for: http://jquery.malsup.com/cycle2/api/

How to add a class to a parent element based on the child's class using jQuery

I'm creating a standard jQuery image slideshow, but I need to add a certain class to a container div, based on which slide is currently showing.
I'm using Flexslider which helpfully gives the current slide a class of 'flex-active-slide'. What I'd like to do is to use that class combined with a unique class to select the active slide (i.e. '.heating-slide.flex-active-slide).
I'd then like to have jQuery apply an additional class to the containing div (.image-slider.full-width), based on which slide is currently showing.
For example:
If the heating slide is showing, I'd like to apply a class of .heating-container to the .image-slider.full-width div.
If the cooling slide is showing, I'd like to apply a class of .cooling-container
And so on
Here's my code:
<div class="image-slider full-width">
<div class="image-slider-container">
<div class="flexslider wide">
<ul class="slides">
<li class="cooling-slide">
<img src="/assets/images/image-slider/slides/cooling-slide.jpg" />
<div class="flex-caption">
<h2 class="">Cooling</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
<a class="button" href="#">Find out more</a>
</div>
</li>
<li class="heating-slide">
<img src="/assets/images/image-slider/slides/heating-slide.jpg" />
<div class="flex-caption">
<h2 class="">Heating</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
<a class="button" href="#">Find out more</a>
</div>
</li>
<li class="ventilation-slide">
<img src="/assets/images/image-slider/slides/ventilation-slide.jpg" />
<div class="flex-caption">
<h2 class="">Ventilation</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
<a class="button" href="#">Find out more</a>
</div>
</li>
</ul>
</div>
</div>
</div>
And here's my poor attempt at writing the required code:
<script type="text/javascript" >
$(document).ready(function () {
$(".heating-slide.flex-active-slide") SOMETHING HERE (".image-slider.full-width").addClass("heating-container");
});
</script>
Any help you can offer will be appreciated!

Update
I wasn't taking into account the other class that was on the element, also made it remove the previously added class so you don't end up with all of them on there:
$(function() {
function setContainer() {
var activeSlide = $(".flex-active-slide");
var activeSlideClass = activeSlide.attr('class')
.replace('flex-active-slide', '')
.replace("-slide", "-container")
var slider = activeSlide.closest(".image-slider.full-width");
var latestClass = slider.data("latest-class");
if (latestClass) {
slider.removeClass(latestClass);
}
slider.addClass(activeSlideClass)
.data("latest-class", activeSlideClass);
}
$('.flexslider').flexslider({
animation: "fade",
controlsContainer: ".flex-container",
animationSpeed: 800, //Integer: Set the speed of animations, in milliseconds
slideshowSpeed: 10000, //Integer: Set the speed of the slideshow cycling, in milliseconds
after: function() { setContainer(); }
});
setContainer();
});
You should be able to paste that into your code as is instead of the existing flexslider binding.
Working Fiddle - http://jsfiddle.net/xt4Ym/3/