I would like to remove or hide the grey "Page 1/1", etc toolbar that appears when hovering over the image as it is blocking access to some of the links further down. The image is an embed from Google Drive.
I'm no coder but this is what I have so far:
[googleapps domain="drive" dir="file/d/1VK0wQFkxwvAHkLDqa8j0NHIeX3ynoRBB/preview" query="#toolbar=0" width="640" height="500" text-align:center]
Example: https://www.wildeones.com/product-tag/uk-size-m-half/
I think you will need to accept and work around that issue by increasing the frame height so injecting a taller height value it may look like this:-
Related
I want to embed a slideshow that goes from edge to edge of the screen. It would be convenient if I could embed into the header, but it only accepts images, and no embeds or zip files.
It sounds like you want a background image. On the toolbar, select View, then Master. You'll see a 'background' option on the toolbar.
In the attached example (here) there is the first background image of the woman in the car, I would like to transfer this out and instead put an auto run, on loop video (mp4) full width and same height in the place. All other copy and content is to remain the same - any ideas how I can do this simply?
All other images if you click on the arrows should also remain. Thanks!
For simplicity. You may use a GIF as a background-image:url(GIF_PATH) instead of a video.
Here is a codepen example
https://codepen.io/leemark/pen/dJxHp
or else you have use the HTML element to embed video content in a document.
https://developer.mozilla.org/en/docs/Web/HTML/Element/video
Also you may also like to have a look at owl corousel
I am still an HTML5 rookie and so far I got something up that's pretty snazzy. I found a template over on HTML5UP which I have been tinkering with, changing the CSS and taking out parts I didn't need, as well as added a couple of things myself.
Now, I wanted to show some images in a gallery, which I have achieved. It works pretty good on mobile too. The other thing I wanted to show, was my YouTube channels playlist, embedded using iframe. On the desktop it looks just fine, but on mobile it breaks the site when viewing the page vertically. I would like to know if there is a way to force the iframe to resize because of a phone screen or if I have to maybe go in another direction with this? (Like using the Video and Audio libraries in JavaScript).
If you can give your code that would be helpful, however I believe this is what you are trying to achieve?
Just give your iframe width a percentage instead of a pixel number. However I recommend you change the height as well, as you can see it looks funny at certain widths.
<iframe width="100%" height="315" src="//www.youtube.com/embed/ep7W89I_V_g" frameborder="0" allowfullscreen></iframe>
I also suggest you read the documentation on media queries.
I added a google + followbutton to my website with the following code:
<g:plus href="https://plus.google.com/100827824854155199322" rel="publisher" width="250" height="69" theme="light">
I need the background of it to match the background of the container its in but im not sure how. I tried seeing what classes it was using and then setting them to my bg color with css but it did not work.
You can see what I mean on the right hand side on my website
http://www.beatmushroom.com/2012/05/phaeleh-afterglow-feat-soundmouse-akira.html#more
There is an open feature request to allow customization of badge background colors.
After using Google Chrome -> Inspect Element and fidgeting around your website,
I think this would be your solution
.yeb{
background-color:<insert your colour code>;
}
that would go into your css file.
Im working on a site's gallery which is made of a thumbnail block displaying all the pictures
and a section for displaying a specific image.
This is the code i use to display the thumbnail and the image in its real size.
<a class="thumb" name="tuzla1" href="http://hkdnapredak.com/root/images/stories/Tuzla2011.jpg" title="Tuzla">
<img height="75" width="75" src="http://hkdnapredak.com/root/images/stories/Tuzla2011.jpg" alt="Tuzla" />
</a>
The problem is: I can't think of anything to set the size of the opened image. Setting the thumbnail size is fine: height="75" width="75" but the size of the opened one is the problem.
Using this method, you can't set the size of the image you're linking to. It's going to open in the browsers with no HTML associated with it, so it will open at it's full size (or scaled to fit, depending on the browser).
The solution is to link to a page that contains the image. This lets you set code that determines the image size. However, this is a manual process - 500 images will require 500 custom pages. Not ideal.
If you get more sophisticated, you can build a script and pass it and image name, height and width, then dynamically build the page to display the image at the given height and width. Then you can display an arbitrary number of images with 1 script.
Another way to go is with a lightbox plugin which lets you pop the full sized image up into a box over top of the rest of the page. You've probably seen this method used on Facebook or other sites - it's popular and doesn't take that much effort to use. I like it because you don't have to leave the page you're on, and you can show lots of photos on a fairly compact page.