I want to use jqzoom gallery application instead of magiczoom.
I have two problems:
Jqzoom shows the same title at all zooms. I want to show thumbnail titles at top of zoomed big image. How can I do this?
At magiczoom application, there is a small magnifying glass image and "zoom" text at top of mid size (to be zoomed) image. How I can realize it at jqzoom?
If you have several elements to zoom with several thumbnails you have to name the "rel" atribute to each group so it can display properly your images:
<a href="images/bora/bora1_lrg.jpg" class="jqzoom" rel='gal1' title="BORA">
<img src="images/bora/bora1_md.jpg" title="BORA" style="border: 5px solid #666;">
</a>
<br/>
<img src='images/bora/bora1_th.jpg'>
<img src='images/bora/bora2_th.jpg'>
<img src='images/bora/bora3_th.jpg'>
<img src='images/bora/bora4_th.jpg'>
</div>
<div class="example_column2" align="center">
<a href="images/bora/bora5_lrg.jpg" class="jqzoom" rel='gal2' title="BORA">
<img src="images/bora/bora5_md.jpg" title="BORA" style="border: 5px solid #666;">
</a>
<br/>
<img src='images/bora/bora5_th.jpg'>
<img src='images/bora/bora6_th.jpg'>
<img src='images/bora/bora7_th.jpg'>
<img src='images/bora/bora7_th.jpg'>
</div>
Related
I have these APNGs on my art portfolio website. They look fine on desktop Safari, but occasionally flicker (changes in color and parts of the APNG disappear) in safari on iOS.
https://artadriana.com/alison
Another person also viewed it on mobile, and they experience the same problem.
I'm not sure if the problem is in my code, or in my images.
<h1>SAMPLE STICKERS</h1>
<div class="three-column-grid" id="alison2-side-by-side">
<img src="/assets/images/27.png">
<img src="/assets/images/17.png">
<img src="/assets/images/25.png">
</div>
<div class="three-column-grid" id="alison2-side-by-side">
<img src="/assets/images/6.png">
<img src="/assets/images/12.png">
<img src="/assets/images/14.png">
</div>
<div class="three-column-grid" id="alison2-side-by-side">
<img src="/assets/images/29.png">
<img src="/assets/images/36.png">
<img src="/assets/images/33.png">
</div>
I'm trying to create a slider component inside a page in an ionic 2 app. I've gotten it to work as intended with the exception that the pager dots don't show up. The documentation on how to use the pager isn't great. Any ideas where I'm going wrong here?
<div class="slider-container">
<ion-slides pager="true">
<ion-slide>
<div class="slide">
<img src='assets/image/scoping.png' />
<p class="slide-title">TITLE 1</p>
<p class="slide-text">Body text 1</p>
</div>
</ion-slide>
<ion-slide>
<div class="slide">
<img src='assets/image/projectmgmt.png' />
<p class="slide-title">TITLE 2</p>
<p class="slide-text">Body text 2</p>
</div>
</ion-slide>
<ion-slide>
<div class="slide">
<img src='assets/image/satisfaction.png' />
<p class="slide-title">TITLE 3</p>
<p class="slide-text">Body text 3</p>
</div>
</ion-slide>
</ion-slides>
</div>
I have also tried <ion-slides options="{pagination: true}"> and <ion-slides pager="true"> and neither of these have worked.
Edited: Upon inspection in the browser, I'm seeing the pager being rendered with a div container like this:
<div class="swiper-pager hide">
So I'm definitely not using the right parameters to unhide the pager. Or there's a bug. I'm using Ionic v2.0.0.
This work for me in Ionic 3:
<ion-content>
<ion-slides pager>
<ion-slide>
<h1>My Slide 1</h1>
</ion-slide>
<ion-slide>
<h1>My Slide 2</h1>
</ion-slide>
<ion-slide>
<h1>My Slide 3</h1>
</ion-slide>
</ion-slides>
</ion-content>
Finally got it to work with this as the opening tag of the slides:
<ion-slides [options]="{pagination: true}">
You can try adjusting your position of pager dots. Maybe it is appearing behind your image. Include in your .scss file:
.swiper-container-horizontal > .swiper-pagination
{
bottom : 50%; //Change accordingly
z-index : 99 !important;
}
I have tested out your code (minus the image), it is appearing on mine.
If you are using swiper to slide page, there are a lot of parameters to do the same as-
<div class="swiper-pagination"></div>
here is the code of paginatin-
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
spaceBetween: 30,
});
Complete code can have a look here.
We have demo of slider as-
http://idangero.us/swiper/demos/#.WUJGrROGNp8
Hope this will also help you!
I'm designing a jQuery Mobile site, and I want an image as a header, but when I insert an image, the image is center aligned, and cut off. How can I set the image to be left aligned to show everything?
My coding:
<div data-role="header">
<br/>
<br/>
<br/>
<h1><img src="/images/HomePage.jpg" width="202" height="104" style=" overflow:visible; float:left" align="left"/></h1>
</div>
Please help me! :)
Why don't you add a class to the div with background-image.
Like this...
HTML
<div data-role="header" class="header"></div>
CSS
.header {
background-image:url("../images/HomePage.jpg");
}
Use following code, use ui-btn-icon-left built in class for aligning to left you can adjust padding and margin.
<div data-role="header" data-theme="b">
<br/>
<br/>
<br/>
<img src="images/logo.png" width="202" height="104" class="ui-btn-icon-left" />
</div>
I'm working with Bootstrap and the carousel plugin. This is my code:
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="active item"><img src="img/tree.jpg"></img></div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
But the images are displayed too small. I want to fill it the whole carousel.
Here is an image (yes, the image is bigger than it is shown in the image):
<div id="myCarousel" class="carousel slide" style="width: 400px; margin: 0 auto">
...
</div>
The question is answered here
In bootstrap 3 add the responsive and center classes:
<img class="img-responsive center-block" src="img/....jpg" alt="First slide">
I believe this is a duplicate question.
I'm using:
jquery-1.8.2 and jquery-mobile-1.2.0 (generated with all options checked)
Targeted devices are iPhone 4/4s/5 and iPad.
The current data-role="listview":
Test link
The current code:
<div data-role="page">
<div data-role="header" data-position="fixed">
<h1>Test</h1>
</div>
<div data-role="content">
<div class="content-primary">
<ul data-role="listview" data-split-icon="gear" data-split-theme="d">
<li><a href="index.html">
<img src="pics/paul_jones.jpg" />
<h3>First Element</h3>
<p>First</p>
</a></a>Test
</li>
<li><a href="index.html">
<img src="pics/ray_moore.jpg" />
<h3>Second Element</h3>
<p>Second</p>
</a>Test
</li>
<li><a href="index.html">
<img src="pics/lisa_wong.jpg" />
<h3>Third Element</h3>
<p>Third</p>
</a>Test
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
</pre>
What is the best way to make each item auto-adjust its height to stretch to full screen vertically (I see that the framework handles very well horizontal stretching), so that each row is 33% of the screen in this case, and have the images resize accordingly? Obviously this would have to work when there are four or more items.
In my site main page I would instead like to have three or four "image buttons" that I styled this way.
<b>#button_id .ui-btn-inner</b>
background: url("../img/button_image.png") no-repeat rgba(0, 0, 0, 0.4);
background-size: 100% 100%;
fill the screen vertically autoresizing themselves.