I have to image with the following code:
echo '<div class="thumb" style="width: '.$array['thumb_width'].'px; height: '.$array['thumb_height'].'px;">
<a class="lightbox" width="72" height="72" href="showfile.php?image_id='.$array['before_image_id'].'" >
<img src="showthumbs.php?image_id='.$array['before_image_id'].'"/">
</a>
<a class="lightbox" width="72" height="72" href="showfile.php?image_id='.$array['after_image_id'].'" >
<img src="showthumbs.php?image_id='.$array['after_image_id'].'"/">
</a>
</div><p><p/>';
The issue is that it is displayed separately in the lightbox. I want it to show two image side by side in one lightbox.. How do I do this?
There are 2 options, depending on the lightbox you're using:
Some lightboxes (colorbox, DOM window, facybox, thickbox) support loading html pages into an iframe rather than just images. If you can try loading html with the two tags into the lightbox.
If you have a lightbox that only supports images (like squarespace's crappy lightbox) you may have to merge the images together using PHP's GD library.
See this question:
Merge Two images together on Server, then save
Related
Using a mobile theme optimized from AMP, I need to add custom CSS to a theme to display a custom banner in a different position. For the purposes of this post, the banner is already in place using:
<div class="td-a-rec td-a-rec-id-header_mob "><div class="td-all-devices">
What I would like to do is place this below the elements with class:
<div class="td_module_mob_2 td_module_wrap td-animation-stack ">
But above the elements with class:
<div class="td-container td-pb-article-list td-main-content" role="main">
The ad needs rendering above the 'LATEST ARTICLES' block title, WITHOUT the ad being displayed in its current position. For a clearer picture of the amp version and CSS modification required see here TBM.
I've tried a few custom CSS snippets using freecodecamp.org/news/css-pseudo-elements-before-and-after-selectors-explained/, but it doesn't appear to be working, since the ad is rendered dynamically using current entries in the theme panel will this be possible, as per the link above the following is currently being rendered:
<div class="td-a-rec td-a-rec-id-header_mob ">
<div class="td-all-devices">
<a href="https://inplayguru.com?r=31289" target="_blank">
<amp-anim src="https://thebetmatrix.win/wp-content/uploads/2022/12/InPlayGuru-Design1-LM-320x100-1.gif" width="320" height="100" alt="InPlay Guru - Inplay Football Stats Scanner" class="amp-wp-enforced-sizes amp-wp-31d994b i-amphtml-layout-intrinsic i-amphtml-layout-size-defined" layout="intrinsic" data-amp-original-style="border:15px" i-amphtml-layout="intrinsic">
<i-amphtml-sizer slot="i-amphtml-svc" class="i-amphtml-sizer">
<img alt="" aria-hidden="true" class="i-amphtml-intrinsic-sizer" role="presentation" src="data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwMCIgd2lkdGg9IjMyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4=">
</i-amphtml-sizer><noscript>
<img src="https://thebetmatrix.win/wp-content/uploads/2022/12/InPlayGuru-Design1-LM-320x100-1.gif.pagespeed.ce.WeGzAscmrw.gif" width="320" height="100" alt="InPlay Guru - Inplay Football Stats Scanner">
</noscript>
</amp-anim>
</a>
</div>
</div>
Thanks
Pseudo elements selectors, requiring as detailed in the post, but expected template output isn't as desired and requires some additional CSS input to render the ad in the position detailed above.
I have a site at https://arvikamagasinet.com
At the top, there is a header image/banner, which links to the original homepage. I would like to change the link so that the header image links to a specific URL.
I need to use CSS to edit this. There is no built-in function in WordPress to change the URL-link of the header image.
Thanks in advance,
Sakeus
the matter is very easy, you should go to your Wordpress theme folder in wp-content then you will find the header.php which display the header or you can search for it in index.php and you find the image and you will find that code :
<a href="https://arvikamagasinet.com/" title="Arvikamagasinet" rel="home" class="header-image">
<img src="https://arvikamagasinet.files.wordpress.com/2020/09/untitled-6-2.png" width="1250" height="400" alt="">
</a>
you will change a href to your ned link :
<a href="link here" title="Arvikamagasinet" rel="home" class="header-image">
<img src="https://arvikamagasinet.files.wordpress.com/2020/09/untitled-6-2.png" width="1250" height="400" alt="">
</a>
I have a gallery page that looks pretty good, but I need to add my own pictures of myself and/or family... I've tried to do so but it isn't working the way it should.
Here a codepen of the problem: https://codepen.io/AJ2021/pen/EOWYvmenter code here
I need my photos to be in a shadowbox so I have a thumbnail on the page and when I click on it, it opens in a large view.
If the codepen has the exact same code your dreamweaver does, I found an error in the snippet.
It originally was:
" alt=""/> rel="shadowbox[picture]" title="a">
<img src="../Documents/SU Fall 2017/Foltz class/tmb_Lawtons_Marina.jpg">
</a>
Now it's:
<a href="../Documents/SU Fall 2017/Foltz_class/img_Lawtons_Marina.jpg" alt="" rel="shadowbox[picture]" title="a">
<img src="../Documents/SU Fall 2017/Foltz class/tmb_Lawtons_Marina.jpg">
</a>
It looks like the anchor tag <a> had closed too early.
Images work on normal page but the amp-version the images doesn't show.
here is a HTML code of a picture, I use WordPress and upload via media library and insert:
<img class="aligncenter wp-image-312" src="http://mysiteexample.com/wp-content/uploads/2016/11/review-1024x768.jpg" alt="Stanley Review" width="256" height="192" />
"
Is there a script I need to insert or something for it to work on amp?
Thanks for your time, I appreciate it.
Use amp-img instead of img for the amp version of your site.
<a href="#">
<amp-img src="http://mysiteexample.com/wp-content/uploads/2016/11/review-1024x768.jpg" width="256" height="192" layout="responsive" alt="Stanley Review"></amp-img>
</a>
I am having issue on my wordpress website. Where I have gallery plugin and the images in that gallery showing this error message when you click on the image. In past those used to pop up when you click on it. But currently it show this error message. I think there is some js conflict please help me here. screenshot- here
webpage - http://www.marvelrealtors.com/residential-properties/izara/
image url is missing in anchor tag. please check.
<a href="#" class="poppup">
<img src="http://www.marvelrealtors.com/wp-content/uploads/2015/05/Izara-Dining-Room.jpg" title="Dining" alt="Dining" data-lazy-loaded="true" style="display: inline;"><noscript><img title="Dining" src="http://www.marvelrealtors.com/wp-content/uploads/2015/05/Izara-Dining-Room.jpg" alt="Dining"/></noscript>
</a>
Working script:
<a class="image-popup-no-margins boxed_shadow" href="http://www.marvelrealtors.com/wp-content/uploads/2015/06/Izara-site-plan.jpg" target="_self">
<img src="http://www.marvelrealtors.com/wp-content/uploads/2015/06/Izara-site-plan.jpg" class=" vc_box_border_grey attachment-full" alt="layout" data-lazy-loaded="true" style="display: inline;"><noscript><img src="http://www.marvelrealtors.com/wp-content/uploads/2015/06/Izara-site-plan.jpg" class=" vc_box_border_grey attachment-full" alt="layout" /></noscript>
</a>
The problem comes from file names, no accent, space or special character and it will work.