I have an image, and I would like to make the image link to an embedded YouTube video, such that if the user clicks on the image, it starts playing in the place where the picture used to be. Any thoughts on how I can accomplish this?
Thank you,
David
Place the embedded video in a div that is invisible:
<div id="video" style="display: none;"> embedded video code here </div>
Then give the img an id too:
<img id="videopic" src="videopic.jpg" alt="Video Picture" />
Then, put a link round the image pointing to some JavaScript which hides the image and shows the embedded video:
<a href="javascript:document.getElementById('video').style.display = 'block'; document.getElementById('videopic').style.display = 'none'; void(0);">
<img id="videopic" src="videopic.jpg" alt="Video Picture" />
</a>
So, the full code would be:
<div id="video" style="display: none;"> embedded video code here </div>
<a href="javascript:document.getElementById('video').style.display = 'block'; document.getElementById('videopic').style.display = 'none'; void(0);">
<img id="videopic" src="videopic.jpg" alt="Video Picture" />
</a>
<div id="hideThisUltraCoolVideoFromYou" style="display:none;">
<object style="height: 390px; width: 640px">
<param name="movie" value="http://www.youtube.com/v/V4jZ_BV4MQ4?version=3&autoplay=1">
<param name="allowFullScreen" value="true">
<param name="allowScriptAccess" value="always">
<embed src="http://www.youtube.com/v/V4jZ_BV4MQ4?version=3&autoplay=1" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="390"></object>
</div>
<img style="width:640px;height:390px;cursor:pointer;" src="thisPictureInsteadOfVideo.jpg" onclick="this.style.display='none';document.getElementById('hideThisUltraCoolVideoFromYou').style.display='block';" />
something like this :)
Related
How to know uploaded file size in grails?
I want to show it on my screen, can you give one example how I can do that?
Here's I'm trying ${this.game.thumbnail.size()} but it doesn't work.
<div class="card-body">
<fieldset>
<div class='fieldcontain required'>
<leve><b>Thumbnail details</b></leve>
<g:if test="${this.game.thumbnail}">
<img src="<g:createLink action='thumbnail' id='${this.game.id}' />" id="thumbnailFile" height="50" width="50" /></br>
<div class='fieldcontain required'>
<leve><b>Download Here</b></leve>
<g:link class="button" action="download" params="['id': this.game.id, type: 'thumbnail']" ><g:message code="Download" /></g:link>
</div>
<div class='fieldcontain required'>
<leve><b>Thumbnail File Size:</b></leve>
<leve>${this.game.thumbnail.size()}</leve>
</div>
</g:if>
<g:else>No Thumbnail details available</g:else>
org.springframework.web.multipart.MultipartFile has a .size() method.
The guide at https://guides.grails.org/grails-upload-file/guide/index.html details how you can get a MultipartFile.
I need to build a confirm button for the images being dropped in Dropzone, which, on press will store the image in a variable and then move on. What function do I call to get this image?
I currently only have this set up:
<div id=dropzone >
<form action="/file-upload" class="dropzone">
<div class="fallback">
<input name="file" type="file" multiple />
</div>
</form>
<img id=confirmbtn src="/images/confirm.png" alt="Confirm">
<img id=cancelbtn src="/images/cancel.png" alt="Click me to remove the file." data-dz-remove />
</div>
I am looking to store the image as a string
I did a ctrl+f (data-dz-thumbnail) on dropzone.js and found this in the preview:
<-this is ONE LINE BTW->
previewTemplate: "<div class=\"dz-preview dz-file-preview\">\n
<div class=\"dz-image\">
<img id='data-dz-thumbnail'data-dz-thumbnail />
</div>\n <div class=\"dz-details\">\n
<div class=\"dz-size\"><span data-dz-size></span></div>\n
<div class=\"dz-filename\"><span data-dz-name></span></div>\n
</div>\n
<div class=\"dz-progress\"><span class=\"dz-upload\" data-dz-uploadprogress></span></div>\n
</div>",
I then changed the whole image thumbnail element to this:
<img id='data-dz-thumbnail'data-dz-thumbnail />
//I added the id='data-dz-thumbnail' part
Then i added an event listener to js
something.onclick....{
var image=document.getElementById('data-dz-thumbnail').src
}
And that is literally it
I'm using the following image code that will show an image only if it exists.
<img th:if="${!ad.adPhotos.empty}" th:src="|/imageDisplay?id=${ad.adPhotos[0].id}|" alt="" class="img-respocive" />
I want to show this for the else caluse
<img height="150" width="150" src="img/NoPicAvailable.png" />
How would this be done with Thymeleaf?
I would personally do it like this:
<img th:unless="${ad.adPhotos.empty}" th:src="|/imageDisplay?id=${ad.adPhotos[0].id}|" alt="" class="img-respocive" />
<img th:if="${ad.adPhotos.empty}"height="150" width="150" src="img/NoPicAvailable.png" />
As a sidenote, I think I would generate the src with thymeleaf url syntax, rather than string concatenation.
<img th:unless="${ad.adPhotos.empty}" th:src="#{/imageDisplay(id=${ad.adPhotos[0].id})}" alt="" class="img-respocive" />
I have a lightbox poptrox gallery installed on my website. Each thumbnail however opens the full image of that thumbnail and when you click next/previous it moves to a picture of the next thumbnail.
Is it possible to make each thumbnail contain a gallery of it's own and when you click on it the full screen image is part of the gallery. That way when you clock next/previous it scrolls through its unique collection of images.
I used this to set it up https://github.com/n33/jquery.poptrox.
Any help would be amazing!
According to the site you set up your gallery like
<div id="gallery">
<img src="path/to/image1_thumbnail.jpg" />
<img src="path/to/image2_thumbnail.jpg" />
<img src="path/to/image3_thumbnail.jpg" />
<img src="path/to/image4_thumbnail.jpg" />
<img src="path/to/image5_thumbnail.jpg" />
<img src="path/to/image6_thumbnail.jpg" />
</div>
and you have a jQuery call like
var foo = $('#gallery');
foo.poptrox();
so you just need to add another gallery like
<div id="gallery1">
<img src="path/to/image1_thumbnail.jpg" />
<img src="path/to/image2_thumbnail.jpg" />
<img src="path/to/image3_thumbnail.jpg" />
<img src="path/to/image4_thumbnail.jpg" />
<img src="path/to/image5_thumbnail.jpg" />
<img src="path/to/image6_thumbnail.jpg" />
</div>
<div id="gallery2">
<img src="path/to/image1_thumbnail.jpg" />
<img src="path/to/image2_thumbnail.jpg" />
<img src="path/to/image3_thumbnail.jpg" />
<img src="path/to/image4_thumbnail.jpg" />
<img src="path/to/image5_thumbnail.jpg" />
<img src="path/to/image6_thumbnail.jpg" />
</div>
and add another jQuery
var foo = $('#gallery1');
foo1.poptrox();
var foo2 = $('#gallery2');
foo1.poptrox();
I hope that this helps, also if you post you have tried I can see how to better help
I am using flexslider.
It is very easy to implement and customizing.
Now my every slide is a link.
is there any way to put to links for a single slide?
that needs to redirect to PAGE1 when click the left side of the image and must redirect to PAGE2 when click the right side.
Thanks in advance dear seniors...
I've found the answer.
The following method is working
<div class="flexslider">
<ul class="slides">
<!-- slide1 -->
<li>
<img src="images/slider/2.jpg" alt="" usemap="#map2" />
<map name="map2">
<area shape="rect" coords="494,2,961,745" href="http://www.john-anthony.com/mens/jeans/" alt=""/>
<area shape="rect" coords="0,4,482,749" href="http://www.john-anthony.com/vivienne-westwood/blazer-jackets/burgundy/jacket-waistcoat-check/vw024-a13-bur/" alt=""/>
</map>
</li>
</ul>
</div>
I've found the answer. The following method is working
<div class="flexslider">
<ul class="slides">
<!-- slide1 -->
<li>
<img src="images/slider/2.jpg" alt="" usemap="#map2" />
<map name="map2">
<area shape="rect" coords="494,2,961,745" href="http://www.john-anthony.com/mens/jeans/" alt=""/>
<area shape="rect" coords="0,4,482,749" href="http://www.john-anthony.com/vivienne-westwood/blazer-jackets/burgundy/jacket-waistcoat-check/vw024-a13-bur/" alt=""/>
</map>
</li>
</ul>
</div>