My goal is to have an image gallery page that displays images in a modal when users click on a picture and be able to view other pictures by clicking on the left and right arrows. I'm attempting to achieve this with lightbox by Lokesh Dhakar. I have added lighbox.css and lightbox.js to my laravel project and my view renders properly but when i click on an image in chromo, the image opens fully in the same tab so that i don't have that modal effect. From the console i see this warning message
Resource interpreted as Document but transferred with MIME type image/png: "http://127.0.0.1:8000/images/albums/albumImg/ckmUU5_album_image.png".
This is the first time I'm doing anything like this with laravel, so i haven't been able to figure out what I'm doing wrong. This is the code i have below
<div class="card-columns mb-5" id="albumImgs">
#foreach($album->photos as $photo)
<div class="card">
<a href="{{URL::to('/')}}/images/albums/albumImg/{{$photo->image}}" data-lightbox="photos">
<img class="card-img" src="{{URL::to('/')}}/images/albums/albumImg/{{$photo->image}}" alt="">
</a>
</div>
#endforeach
</div>
I need help figuring out what I'm doing wrong and how to achieve my goal.
I've found the solution. The issue was caused by the jquery file, bootstrap 4 ships with the jquery slim version by default and it does not have the fadeIn function. Changing the cdn to jquery.min was all i did and my goal has been achieved. I hope this helps someone out there.
Related
Let me start by saying I'm not a web developer. I barely know enough HTML to be able to edit templates to show what I need them to show.
I have an HTML template I purchased which uses lightbox to display an image gallery. I thought it would be fine to replace the links to the images the template used with links to YouTube videos I want displayed instead. However, I have a very weird problem with the page. When viewed locally (from my hard drive copy), the videos play fine. However, when viewed online after uploading to the server, the lightbox opens up when clicked on, but stays stuck at trying to load the video. They never come up. Here's the code snippet used to display the video in my template.
<a class="c-image-overlay t-image-overlay js-lightbox" href="https://www.youtube.com/watch?v=hQtFLkwXaN8" data-lightbox-hidpi="" title="Deadalus' Last Flight" data-lightbox-gallery="portfolio">
<img src="assets/images/portfolio/orchestral_450x300_halftone_BW.png" alt="">
<div class="c-image-overlay__content">
<h3>
Orchestral
</h3>
<hr class="c-image-overlay__deco-line t-image-overlay__deco-line" />
<p>
Orchestral piece that would fit nicely as a film theme.
</p>
</div>
</a>
I can replace the code by the embed code provided by YouTube, and it works, but I lose all the layout functionality I had before (along other things).
Any help with getting this to work properly is really appreciated. Otherwise, I'll just need to replace these lightboxes with something else.
Thanks in advance!
I would like an overlay in Laravel view when a user clicks on a image an overlay appears and u can switch to next/previous image. I'm pretty new and can't really imagine how it's done (to switch views on the overlay).
I print the images in the blade file with
#foreach($pictures as $pic)
<img src="\storage\pictures\{{ $pic }}">
#endforeach
I tried Jquery overlay when image clicked but didn't work for me.
I can see the .imgcontain css in browser inspector.
I don't need a full solution just a hint what to search. Thanks!
I'm trying to make a picture portfolio like the first demo example on this page http://www.no-margin-forerrors.com/projects/prettyphoto-jquery-lightbox-clone/#prettyPhoto . However, instead of have it invoke an image when clicked it takes me to another page, I'd like it to have a pop up image instead. I had already checked possibilities in theme settings but none available.
This is the link http://tile.johnzuh.com/unsere-fliesen/ to the Page with this behaviour. You will realise that once u click on the gallery image item it sends you to another page using this
<a itemprop="url" class="eltdf-pli-link" href="http://tile.johnzuh.com/portfolio-item/home-interior-2/" target="_self"></a>
linked element to image. This is an unexpected behaviour
How it should behave
I would appreciate a behaviour similar to that on this page instead http://tile.johnzuh.com/portfolio-item/plava-identity-design-4/
Once you click on an image it should invoke a bigger image from thumbnail.
I see it uses
<a itemprop="image" title="portfolio-single-13" data-rel="prettyPhoto[single_pretty_photo]" href="http://tile.johnzuh.com/wp-content/uploads/2016/09/portfolio-single-13.jpg">
<img itemprop="image" src="http://tile.johnzuh.com/wp-content/uploads/2016/09/portfolio-single-13.jpg" alt="s" />
</a>
It uses the prettyPhoto element instead of linking to the href. How do i adopt this ? Some quick workarounds, examples will be appreciated.
Issue was solved by changing some dynamic settings in theme.
I've been messing around with a ton of different attempts none of which have proved even remotely successful. If someone is willing to, would you either walk me through or point me in the right direction.
I'm using http://sorgalla.com/projects/jcarousel/ Jcarousel as the image carousel on the top of the page with 3 images up at a time.
I'm looking for something like this following link http://tamarackcellars.com/ but where the content at the bottom of the page changes instead of the whole page loading to a new page when you click on one of the wines.
Any help would be greatly appreciated.
ok I am assuming you can get the carousel plugin to work, if not let me know.
If I understand you right, you want the content of the page to change but not to redirect. If this is static content then what you want is relatively simple and can be solved many ways.
First set up your carousel and give each image or content the same class like class="carouselObj". Then create a container on the same page that will hold different information with respect to each element of the carousel.
<div id="container">
<div class="info">1st image info</div>
<div class="info">2nd image info</div>
<div class="info">3rd image info</div>
<div class="info">4th image info</div>
</div>
Now to add some jquery to make it functional.The idea here is that when one of the images changes via click or from a timed event, the corrosponing information in the container will also change. Here is some code to give you the idea.
$('.carouselObj').click(function(){
var index = $('.carouselObj').index(this); // gets the index of carousell image clicked
$('.info').eq(index).show().siblings('.info').hide(); // shows the corrosponding element and hides the others.
});
Now in the css file you need to make sure you originally set the first info class
I am having a hard time searching for the answer to my problem. Mainly because I have no idea how to ask it in a google/yahoo search.
My site: http://www.wbsnightout.com/sidekick
On the right side I have three sponsor ad div's with images rotating. Each image has a title and is a clickable link. The only problem is, is that when you mouse over the image, the LINK and TITLE for the image BEHIND the shown image comes up. When I click on it, it takes me to the wrong link, because it's the link for the image behind it.
Here is an example of my HTML:
<div id="right-sponsor"> <!-- Begin right Sidebar -->
<div class="advertiseSlides" id="sponsor2">
<a title='Click for more Info!' href='http://www.ricochetsrapiddetail.net/' target='_blank' rel='nofollow'><img src='/images/advertise/ricochet_ad.jpg' alt='Ricochet's Rapid Detail' title='Ricochet's Rapid Detail' height='200' width='240' />
</a> </div>
This is pulled dynamically using php and mysql.
I have this before my closing body tag within a script tag
initImageGallery('sponsor1', 5000);
And my javascript file can be found: http://www.wbsnightout.com/sidekick/js/slideshow.js
I don't know much about javascript so I just used I script that I found online.
If you can answer or point me to a discussion or tutorial, that would be great!
Thanks,
You need to put this (add 'z-index:9999;' to .advertiseSlides img in css