Basically short information about this situation :
I have a slideshow like this
enter image description here
And front-end developer didn't find the easiest solution so here is the front-end code for background images :
<div class="item">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 less_spacing"> <img src="{{ url('/dd/img/img/ss/4.jpg') }}"> </div>
<div class="col-sm-6 less_spacing"> <img src="{{ url('/dd/img/img/ss/2.jpg') }}"> </div>
</div>
</div>
and here for the centre image :
<div class="item" style="background: url(/dd/img/dd/what/1.jpg) center; background-size:cover;">
<img src="{{ url('/dd/img/dd/what/1.jpg') }}" class="img-responsive hidden-lg hidden-sm hidden-md">
<span class="sml-logo"><img src="{{ url('/dd/img/sml-logo.png') }}" alt=""></span>
<div class="caption left_panel">
<div class="inner">
<p>... The key of the door that will open you to the world of gastronomy and history of modern Baltic cuisine, blending international tendencies and interesting selections of wine.</p>
</div>
</div>
</div>
How you can understand here there is 4 images in this example : the last is 4th.
The centre image is with ID : 1;
I can't make this just based on the ID's from the database because if user will delete some results then +1 -1 will not work for previous and the next image.
Summed up : Basically all I want in this situation is when user clicks on next image the background (left) image changes to the previous centre image and the background(right) side image changes to the next image (3rd) and so on...
Related
The video is not playing when I try to access the home page. But if I open another page and click on home page again, this time the video is playing. Overlay text is not showing. There is some padding available from top to the banner.
I am expecting video with overlay text without any space from Top.
Please tell me valid code to play video banner with above issue fixed. Every time I have to go to another page to play the home banner video.
Reference screencast: https://www.screencast.com/t/SgSaciVYkAT
Following are the mentioned codes:
<!-- BANNER
================================================== -->
<div class="top-position z-index-1 banner2">
<div class="d-flex align-items-center position-relative min-vh-100 bg-white bg-img primary-overlay cover-background" data-overlay-dark="7">
<video width="100%" height="100%" autoplay control loop>
<source src="video/digital-marketing-company.mp4" type="video/mp4">
</video>
<div class="container">
<div class="row align-items-center justify-content-center text-center">
<div class="col-12 caption">
<h3 class="subtitle">Our Growth Business</h3>
<h1 class="banner-headline clip">
<span class="blc text-white d-block">Get World Class Best</span>
<span class="banner-words-wrapper highlight mx-auto">
<b class="is-visible">Solution</b>
<b>Services</b>
<b>Technology</b>
</span>
</h1>
<i class="ti-arrow-right icon-arrow before"></i><span class="label">Get Started</span><i class="ti-arrow-right icon-arrow after"></i>
<i class="ti-arrow-right icon-arrow before white"></i><span class="label">Contact Us</span><i class="ti-arrow-right icon-arrow after"></i>
</div>
</div>
</div>
</div>
</div>
I am trying to display the single image in the slider, but whenever the user will click on this then it's open a popup in data-src="multiple-images-here" where I am running the slider. But the main issue is with the single image display in for loop. It displays all the available images in the loop. Please suggest me the best solution for this.
Here is my index.blade.php file where I am trying to display the slider using this code.
<div class="container-fluid margin-gallery d-lg-block d-block position-relative">
<div class="row">
<div class="col-lg-12 p-0">
<div class="demo-gallery">
#php
if($propertys->propertyImage!=null){
$images = json_decode($propertys->propertyImage->image_path, true);
}
else{
$images=null;
}
#endphp
<?php
$images_prop = collect($images['property_images']);
?>
<ul id="lightgallery">
#if($images['property_images']!=null)
#forelse($images_prop as $img)
<li class="sizing-li position-relative" data-src="{{ asset($img) }}">
<a href="javascript:void()">
<img class="img-responsive" src="{{ asset($img) }}" style="width:929px; height:495px;">
</a>
</li>
#empty
#endforelse
#endif
</ul>
</div>
</div>
</div>
</div>
I want to display the first image from for loop here
<img class="img-responsive" src="{{ asset($img) }}" style="width:929px; height:495px;">
You can pass ->first() function to get only 1 images, It will show you only the first item from your data in database.
I have embedded a gif image from imgur in a laravel project. While any external jpeg, png link perfectly displays on the blade, whenever I replace with gif it gets broken. I am using xampp local server.
code snippet
<div class="card mb-3">
<img src="https://i.imgur.com/juuaqEg.gif" alt="Imgur" class="card-img-top" style="width:100%;height: 30vw; object-fit:cover; " alt="...">
<div class="card-body">
<h5 class="card-title">List of Students</h5>
<p class="card-text">This is a comprehensive panel for student management. Click buttons to make changes.</p>
</div>
</div>
I replaced the imgur link with a static jpeg/png image link and there is no problem to render. Don't laravel allow animated gif from external links?
Try this:
<div class="card mb-3">
<img src="{{ URL::asset('https://i.imgur.com/juuaqEg.gif') }}" alt="Imgur" class="card-img-top" style="width:100%;height: 30vw; object-fit:cover; " alt="...">
<div class="card-body">
<h5 class="card-title">List of Students</h5>
<p class="card-text">This is a comprehensive panel for student management. Click buttons to make changes.</p>
</div>
</div>
else try downloading the gif in public folder (of your proyect) and calling
<img src="./nameOfTheFile.gif" alt="Imgur" class="card-img-top" style="width:100%;height: 30vw; object-fit:cover; " alt="...">
I have created a web page to display image, topic and details. Just now i have a static html page this is just a page i have nothing implemented any thing.
<section class="section-02">
<div class="container">
<h3>
<div class="heading-large">Current Best</div>
</h3>
<div class="row">
<div class="col-md-4">
<div class="card"> <img class="img-fluid" src="img/media-1.jpg" alt="">
<div class="card-block">
<div class="news-title"><a href="#">
<h2 class=" title-small">An Alternative Form of Mental Health Care Gains a Foothold</h2>
</a></div>
<p class="card-text"><small class="text-time"><em>3 mins ago</em></small></p>
</div>
</div>
<ul class="news-listing">
<li>Key Republicans sign letter warning against candidate</li>
<li>Obamacare Appears to Be Making People Healthier</li>
<li>Syria war: Why the battle for Aleppo matters</li>
<li>‘S.N.L.’ to Lose Two Longtime Cast Members</li>
</ul>
</div>
<div class="col-md-4">
<div class="card"> <img class="img-fluid" src="img/media-2.jpg" alt="">
<div class="card-block">
<div class="news-title"><a href="#">
<h2 class=" title-small">Delta passengers got pizza delivered to the plane</h2>
</a></div>
<p class="card-text"><small class="text-time"><em>3 mins ago</em></small></p>
</div>
</div>
<ul class="news-listing">
<li>Syria war: Why the battle for Aleppo matters</li>
<li>Key Republicans sign letter warning against candidate</li>
<li>Obamacare Appears to Be Making People Healthier</li>
<li>‘S.N.L.’ to Lose Two Longtime Cast Members</li>
</ul>
</div>
<div class="col-md-4">
<div class="card"> <img class="img-fluid" src="img/media-3.jpg" alt="">
<div class="card-block">
<div class="news-title"><a href="#">
<h2 class=" title-small">Minorities Suffer From Unequal Pain Treatment</h2>
</a></div>
<p class="card-text"><small class="text-time"><em>3 mins ago</em></small></p>
</div>
</div>
<ul class="news-listing">
<li>‘S.N.L.’ to Lose Two Longtime Cast Members</li>
<li>Key Republicans sign letter warning against candidate</li>
<li>Obamacare Appears to Be Making People Healthier</li>
<li>Syria war: Why the battle for Aleppo matters</li>
</ul>
</div>
</div>
</div>
</section>
now i want to store this in mysql database using angular and php
Although it's technically possible to store an image in a BLOB type, I totally discourage you to do it and rather use a could-based filesystem such as S3 or the local filesystem of the server. Just store on the DB the URI of the image.
Storing BLOBS in the DB will make it slower, the backups will take much longer and the queries must be optimized to avoid retrieving the BLOB. A simple SELECT * FROM users; can kill your DB if you have thousands of users.
I have the following code:
<div class="container-fluid>
{files}
<div class="media">
<div class="media-left">
<img src="<?php echo base_url('files/{filename}'); ?>" alt="afbeelding" class="media-object" style="width:200px">
</div>
<div class="media-body">
<h4 class="media-heading">{title}</h4>
<p>{text}</p>
</div>
</div>
<br>
{/files}
</div>
The current result is just the title and text being shown, without the image. When I remove the whole div with class "media-body", the image shows. I think my code is structured right, I followed the w3-schools example. How can I get both the image and text to show up in the bootstrap media format?
Missing "
Change from
<div class="container-fluid>
to
<div class="container-fluid">