I want to know is there an easy way in order to be able to place images in a loop as below in like a slider? The user sees first image in a slider and then by using arrows for example, be able to slide to next to next or previous image. If user is on last image and wants to go on next image, it displays the first image again. if user is on first image and click on previous, it goes on last image. So it stays continuous.
Below is code where if there are no images then it displays a blank but if there are images, then displays those images in a slider:
<?php
//start:procedure image
$img_result = '';
if(empty($arrImageFile[$key])){
$img_result = ' ';
}else{
?>
<?php foreach ($arrImageFile[$key] as $i) { ?>
<p><img alt="<?php echo $i; ?>" height="200" width="200" src="<?php echo 'ImageFiles/'.$i; ?>"></p>
<?php } ?>
<?php
}
//end:procedure image
A basic jquery slider is easy to implement with instructions of you fancy it: http://basic-slider.com/
Codrops is a nice site for front-end sollutions, I found this plugin that can maybe can help you, in this tutorial she teaches how to do it, and gives you a demo code too.
http://tympanus.net/codrops/2012/04/05/slideshow-with-jmpress-js/
Enjoy it!
Related
Good evening, My first message here, where I read so much and did a lot of research to find a solution but without a good result. As a title, a good way to block uploads, when accessing the page, is contained within the <iframe> tags.
An example of code is: <iframe> width = "560" height = "315" src = "https://www.youtube.com/embed/example" frameborder = "0" allowfullscreen> </iframe>
I have read several codes on how to enter the youtube iframe and allow the upload of external resources later, more precisely after clicking on a preview image, adapting html, csss, and javascript in sync with the youtube video id .
But I did not try this solution because the affected iframes are not just part of youtube but they come from other sources, always with the same arrangement as in the above example, and found nothing that could guide me towards the right direction.
Always hoping I'm well explained, do you have any hints on how to hide iframes load and overlap a page loading image at the click, disappear, showing the contents of the frame? Thank you. Forgive my very poor English.
You can use an example for YouTube and just replace the iframe source along with the other variables with your own data. Just skip the thumbnail image part. Replace the on-click event with your own event if you need to.
The technique remains the same. YouTube or not!
see this vanilla js example
Make sure your video's have unique ID's. Render the HTML like this.
<?php $i = 0; ?>
<?php foreach ($sources as $source): ?>
<?php $i++; ?>
<div class="video" id="video-<?php echo $i; ?>">
<div class="divise" id="divise-<?php echo $i; ?>" data-embed="<?php echo $source; ?>">
<div class="play-button"></div>
</div>
</div>
<?php endforeach; ?>
I'm working on task of share a link on facebook. But I want to display my own static image (independent of url). With help of google and facebook, I come to know that I have to pass image path (which I want to display) in image parameter of sharer.php. But still, it displays image related to that site. I don't know that where is my mistake. If anyone know answer then please explain or suggest me link from where I can understand from beginning. Thank You.
Here is my code.
<?php
$title = urlencode("How to Create a Custom Facebook Share Button with a Custom Counter");
$url = urlencode("http://www.daddydesign.com/wordpress/how-to-create-a-custom-facebook-share-button-with-a-custom-counter/");
$summary = urlencode("Learn how to create a custom Facebook 'Share' button, complete with a custom counter, for your website!");
$image = urlencode("http://www.daddydesign.com/ClientsTemp/Tutorials/custom-iframe-share-button/images/thumbnail.jpg");
?>
<html>
<a id="button" onClick="window.open('http://www.facebook.com/sharer.php?s=100&p[title]=<?php echo $title; ?>&p[summary]=<?php echo $summary; ?>&p[url]=<?php echo $url; ?>&&p[images][0]=<?php echo $image; ?>', 'sharer', 'toolbar=0,status=0,width=550,height=400');" target="_parent" href="javascript: void(0)">
Click to Share
</a>
</html>
Your image http://www.daddydesign.com/ClientsTemp/Tutorials/custom-iframe-share-button/images/thumbnail.jpg is the problem - it's not actually an image but takes you to a regular webpage.
You need to set a specific image which fits facebook's size requirements, the minimum size is 200x200 pixels.
I'm trying to do some stuff with jquery/js (I don't know which one it is..), for example this script ; http://pastebin.com/V3HpU0NY - > http://blog.mainstreethost.com/light-youtube-embeds-faster-page-load#.VG9HKamkVSJ
But now comes the difficult part.
Url: http://erwin.my89.nl/stage/sieh/
This is the website when you go to the url.
This loads the "gallery (top)" and all content/ and kinda images(lazyload) for all the 'gallery' posts. If this has to be done another way please say so.
When you click a image you'll get this:
I hope you understand the idea.
So everything working ok
but now i go in to the inspector and i encounter this?!
I assume it is because i have the script defined in the loop of the content.. so when i click a gallery image, it loads another bunch of those text/css's.
So my question is: Is this the right way to do it? or should i be doing this different?
while ($loop->have_posts()) : $loop->the_post($post->ID);
if ($metas) {
foreach ($metas as $metakey) {
} elseif ($metakey['url']) {
preg_match(
'/[\\?\\&]v=([^\\?\\&]+)/',
$metakey['url'],
$matches
);
$id = $matches[1];
?>
<div class="youtube" id="<?php echo $id ?>" style="width: 560px; height: 315px;"></div>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/youtube.js"></script>
<?php
^part of the code, if need more please say so.
Thanks in advance!
Can you put your CSS file/s in the head? That's where it normally goes.
Also, I don't see anywhere in your PHP where it could be loading these <style></style> tags. However it does look like it's going to import the same script at the end of each loop.
Could you provide more information on what your exact problem is?
I have a single page with multiple instances of Swipe.js running. They are loaded dynamically through the CMS so hard coding values isn't really possible.
I have followed the steps outlined in this other post:
Generate Swipe JS slider for each slider DIV
I can get everything working except the last part where they talk about dynamically loading the prev/next controls for each player.
I create multiple sliders with:
var swipes = []
$('.slider').each(function(i, obj) {
swipes[i] = new Swipe(obj);
});
Then in the template code that structures each slider I have the following:
<?php $counter = 1; ?>
<div id="swipes<?php echo $counter; ?>" class='slider swipe gallery'>
<div class='swipe-wrap'>
//Images go here
</div>
<div>
<button onclick='swipes<?php echo $counter; ?>.prev()'>prev</button>
<button onclick='swipes<?php echo $counter; ?>.next()'>next</button>
</div>
<?php $counter++; ?>
</div>
The PHP counter does it's job perfectly, but for some reason when I click on a prev/next button I get the follow Console error:
Uncaught TypeError: Object # has no method 'next'
Thanks in advance!
i start working on new project and i have task-make color for button, what have href on current page.
Buttons there. And in that project that all buttons just image!
<map id="schemaMap" name="schemaMap">
<? for ($i=0;$i<3;$i++):?>
<area shape="<?php echo $shape ?>"
coords="<?php echo $coords[$i] ?>"
<? if ($curretAction == $action [$i]):?>
onclick ="return false;"
<? else: ?>
href ="<?php echo $links[$i] ?>"
<? endif; ?>
alt ="<?php echo $this->translate($alt[$i]); ?>"
/>
<? endfor;?>
</map>
And now i don't know how make that part of image with color. Any ideas?
To change the colour of your buttons you'll need to create some new images with different colour buttons that you can substitute when the buttons are clicked.
You can create a whole new image with each button in a different colour as you need (slow!) or you can slice the image up into smaller parts and create new images just for the buttons.
Once done, and you have created HTML to reassemble the parts on the page you'll need some javascript to change the button images onClick, or your PHP will have to generate a new page with the right buttons.
Either way, start with the image and a graphics program.
As an afterthought, you might be able to do this with HTML Canvas elements, but that's a whole different approach!