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!
Related
I saw few sites that use this thing but I didn't know what is it.
I was browsing a site ansehen I tried to download the images in the page no matter what method I used to download different images came out instead of the images I saw.
So I wanted to do that on my WordPress site to protect my images from being stolen.
If anyone have any idea what is that called and how it's done please help me.
It could be a way for you to use the images as an background image and place a transparent image above. So when the user right clicks the image, he will not be able to save the image this way. Of course he can look at the code and find out the url of the background image or just take a screenshot and crop it. But this would be more effort, so your images are much better protected then without this method.
Useful link for your issue: https://www.computerhope.com/issues/ch000977.htm
I adapted a code example from this site using a div container instead of a table:
<div style="background-image:url('pictures/image.jpg'); background-size:cover;">
<img width="350" height="150" src="pictures/transparent.png" alt="copyright">
</div>
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.
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.
I have this site I've been working on here: http://www.replyonline.co.uk/DirectionGroup/xmas/index.php
When you hover over the first photo at the top, a voting box appears. Now if you click on the photo it displays the 'By whom' name and 2 numbers (the vote results). Both the photo thumbnail and the enlarged lightbox share the same HTML content as each other.
What I don't understand is why the enlarged box doesn't display the HTML properly, just the 2 numbers from the voting element rather than the voting element itself.
If you look at the source, you can see down the page in the code is the javascript and I can't figure out what I need to change to the JS in order to make HTML display on the larger view?
Here is an example of what the markup is for each thumbnail you click:
<img src="images/thumbs/1.jpg" data-largesrc="images/large/1.jpg" alt="image01"/><span>By Tim Morgan <?php echo ThumbsUp::item('1')->template('thumbs_up_down') ?></span>
As you can see, there is the thumb source and the large source as well as the voting function.
It turns out you have to set HTML with the .html method - currently you're converting the whole to text and then setting text.
Secondly, it looks like .tmpl does not like HTML. If you also set the HTML the first time (when doing .tmpl), it should always work.
It may help to clone() the forms so they exist on the previews.
I'm creating an image gallery using the Galleria plugin.
I'm customised the styling of the gallery, editing css within the .js file, but there's one task that's got me stumpted:
I'm trying to replace the arrows that appear on either side of the image lightbox. They are currently created using type, but I need to replace these using images to be consistent with the rest of the site.
I've tried adding the images as I normally would using CSS, but it failed to display.
I'm not very experienced with Javascript so any tips on how to call images in CSS contained within Javascript would be gratefully received.
Here's a link to the code from the Javascript:
http://jsfiddle.net/tomperkins/TQDU7/
And here's a link to the plugin site if that helps:
http://galleria.aino.se/
Thanks in advance,
Tom Perkins
You just have to edit the "classic-map.png".. just make sure you map them in the same way ( put your button images at the same spot as the once already there )